Invoering
In frontend-projecten die zelden een app van één pagina vereisen, worden inline-stijlen van DOM-elementen vaak in de doelelementen geplaatst. >' attribuut.
Maar in React zijn de zaken heel anders als het gaat om inline styling. Deze handleiding richt zich op het bereiken hiervan aan de hand van een praktijkvoorbeeld van het maken van een component voor een gebruikersprofielkaart.
Stylingcomponenten in React
Mogelijk bent u al op de hoogte van de reguliere manier om React-componenten op te maken met behulp van het classname-attribuut in combinatie met een extern stylesheet:
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-stijlen
Hetzelfde resultaat verkrijgen met inline-stijlen werkt heel anders. Om inline stijlen in React te gebruiken, gebruikt u het stijlattribuut, dat een JavaScript-object met camel-eigenschappen accepteert. Voorbeeld:
function MyComponent(){ return Inline Styled Component } Houd er rekening mee dat de opvulwaarde geen eenheid heeft omdat React a toevoegt 'px 'achtervoegsel voor enkele numerieke inline-stijleigenschappen. In gevallen waarin u andere eenheden moet gebruiken, zoals 'em' of 'rem', specificeert u de eenheid expliciet met de waarde als een tekenreeks. Als u dit op de eigenschap opvulling toepast, moet dit opvulling zijn: '1,5em' .
Bovendien krijgen deze stijlen niet automatisch een leveranciersvoorvoegsel, dus u moet de leveranciersvoorvoegsels handmatig toevoegen.
Verbeter de leesbaarheid
De leesbaarheid van MyComponent neemt dramatisch af als de stijlen te veel worden en alles onhandig wordt. Zoals u hieronder kunt zien, kunnen stijlen, aangezien deze slechts objecten zijn, uit de component worden verwijderd.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Een kaartcomponent bouwen
Laten we de gebruikerskaartcomponent bouwen.
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> } Vuistregel
De officiële React-documentatie blaft over het gebruik van inline-styling als het belangrijkste middel om projecten te stylen en beveelt aan om in plaats daarvan het className-attribuut te gebruiken.
Opmerking In sommige voorbeelden in de documentatie wordt voor het gemak een stijl gebruikt, maar het wordt over het algemeen niet aanbevolen om het stijlattribuut als primair middel voor het stylen van elementen te gebruiken.
In de meeste gevallen, naam van de klasse s moet verwijzen naar klassen die zijn gedefinieerd in een extern CSS-stylesheet. Stijlen worden vaak gebruikt in React-apps om dynamisch berekende stijlen toe te voegen tijdens het renderen.