Introduktion
I frontend-projekt som sällan kräver en ensidig app, placeras ofta inline-stilar av DOM-element i målelementets >' attribut.
Men i React är det helt annorlunda när det gäller styling inline. Den här guiden fokuserar på att uppnå detta genom att använda ett verkligt exempel på att skapa en komponent för användarprofilkort.
Stylingkomponenter i React
Du kanske redan är medveten om det vanliga sättet att utforma React-komponenter med attributet classname i kombination med en extern stilmall:
import React from 'react' import './style.css' function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) } jsx
paragraph-text{ font-weight: bold; color: beige; } CSS
Inline stilar
Att få samma resultat med inline-stilar fungerar helt annorlunda. För att använda inline-stilar i React, använd stilattributet, som accepterar ett JavaScript-objekt med kamelegenskaper. Exempel:
function MyComponent(){ return Inline Styled Component } Observera att utfyllnadsvärdet inte har en enhet eftersom React lägger till en 'px ' suffix till några numeriska inline-stilegenskaper. I de fall du behöver använda andra enheter, till exempel 'em' eller 'rem', ange uttryckligen enheten med värdet som en sträng. Att tillämpa detta på padding-egenskapen bör vara padding: '1,5em' .
Dessa stilar har inte heller automatiskt leverantörsprefix, så du måste lägga till leverantörsprefix manuellt.
Förbättra läsbarheten
Läsbarheten för MyComponent sjunker dramatiskt om stilarna blir för många och allt blir klumpigt. Som visas nedan, eftersom stilar bara är objekt, kan de tas bort från komponenten.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Bygga en kortkomponent
Låt oss bygga användarkortskomponenten.
const cardStyles = { container: { display: 'flex', height: 100, width: 400, boxShadow: '0 0 3px 2px #cec7c759', alignItems: 'center', padding: 20, borderRadius: 20, }, profilePicture: { display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'orange', color: 'white', height: 20, width: 20, borderRadius: '50%', padding: 10, fontWeight: 'bold', }, bio: { marginLeft: 10, }, userName: { fontWeight: 'bold', }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> } Tumregel
Den officiella React-dokumentationen skäller på att använda inline-styling som det primära sättet för stylingprojekt och rekommenderar att du istället använder className-attributet.
Obs! Vissa exempel i dokumentationen använder en stil för enkelhetens skull, men det rekommenderas i allmänhet inte att använda stilattributet som det primära sättet att utforma element.
I de flesta fallen, klassnamn s bör referera till klasser definierade i en extern CSS-stilmall. Stilar används ofta i React-appar för att lägga till dynamiskt beräknade stilar vid renderingstid.