Introduksjon
I frontend-prosjekter som sjelden krever en enkeltside-app, plasseres ofte innebygde stiler av DOM-elementer i målelementets >' attributt.
Men i React er ting ganske annerledes når det gjelder styling inline. Denne veiledningen fokuserer på å oppnå dette ved å bruke et ekte eksempel på å lage en brukerprofilkortkomponent.
Styling av komponenter i React
Du er kanskje allerede klar over den vanlige måten å style React-komponenter på ved å bruke classname-attributtet i forbindelse med et eksternt stilark:
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 stiler
Å få det samme resultatet med innebygde stiler fungerer ganske annerledes. For å bruke innebygde stiler i React, bruk stilattributtet, som godtar et JavaScript-objekt med kamelegenskaper. Eksempel:
function MyComponent(){ return Inline Styled Component } Merk at utfyllingsverdien ikke har en enhet fordi React legger til en 'px ' suffiks til noen numeriske innebygde stilegenskaper. I tilfeller der du trenger å bruke andre enheter, for eksempel 'em' eller 'rem', spesifiser enheten eksplisitt med verdien som en streng. Å bruke dette på padding-egenskapen bør være padding: '1.5em' .
Disse stilene har heller ikke automatisk leverandørprefiks, så du må legge til leverandørprefikser manuelt.
Forbedre lesbarheten
Lesbarheten til MyComponent synker dramatisk hvis stilene blir for mange og alt blir klønete. Som vist nedenfor, siden stiler bare er objekter, kan de fjernes fra komponenten.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Bygge en kortkomponent
La oss bygge brukerkortkomponenten.
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> } Tommelfingerregel
Den offisielle React-dokumentasjonen bjeffer for å bruke innebygd styling som den primære metoden for stylingprosjekter og anbefaler å bruke className-attributtet i stedet.
Merk Noen eksempler i dokumentasjonen bruker en stil for enkelhets skyld, men det anbefales generelt ikke å bruke stilattributtet som det primære middelet for styling av elementer.
I de fleste tilfeller, klassenavn s skal referere til klasser definert i et eksternt CSS-stilark. Stiler brukes ofte i React-apper for å legge til dynamisk beregnede stiler på gjengivelsestidspunktet.