Introduktion
I frontend-projekter, der sjældent kræver en enkeltsides app, placeres inline-stile af DOM-elementer ofte i målelementets >' attribut.
Men i React er tingene helt anderledes med hensyn til styling inline. Denne vejledning fokuserer på at opnå dette ved at bruge et eksempel fra den virkelige verden på oprettelse af en brugerprofilkortkomponent.
Styling komponenter i React
Du er måske allerede klar over den almindelige måde at style React-komponenter på ved hjælp af classname-attributten i forbindelse med et eksternt typografiark:
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 stilarter
At få det samme resultat med inline-stile fungerer helt anderledes. For at bruge inline-stile i React skal du bruge stilattributten, som accepterer et JavaScript-objekt med kamelegenskaber. Eksempel:
function MyComponent(){ return Inline Styled Component } Bemærk, at polstringsværdien ikke har en enhed, fordi React tilføjer en 'px ' suffiks til nogle numeriske inline-stilegenskaber. I tilfælde, hvor du skal bruge andre enheder, såsom 'em' eller 'rem', skal du udtrykkeligt angive enheden med værdien som en streng. Anvendelse af dette på padding-egenskaben skal være polstring: '1.5em' .
Disse stilarter er heller ikke automatisk leverandørpræfikser, så du skal tilføje leverandørpræfikser manuelt.
Forbedre læsbarheden
Læsbarheden af MyComponent falder dramatisk, hvis stilene bliver for mange, og alt bliver klodset. Som vist nedenfor, da stilarter kun er objekter, kan de fjernes fra komponenten.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Opbygning af en kortkomponent
Lad os bygge brugerkortkomponenten.
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 officielle React-dokumentation bjæffer sig ved at bruge inline-styling som det primære middel til stylingprojekter og anbefaler at bruge className-attributten i stedet.
Bemærk Nogle eksempler i dokumentationen bruger en stil for nemheds skyld, men det anbefales generelt ikke at bruge stilattributten som det primære middel til styling af elementer.
I de fleste tilfælde, klassenavn s skal referere til klasser defineret i et eksternt CSS-stylesheet. Styles bruges ofte i React-apps til at tilføje dynamisk beregnede stilarter på gengivelsestidspunktet.