introduzione
Nei progetti frontend che raramente richiedono un'app a pagina singola, gli stili in linea degli elementi DOM vengono spesso inseriti negli elementi target >'attributo.
Ma in React le cose sono abbastanza diverse per quanto riguarda lo styling in linea. Questa guida si concentra sul raggiungimento di questo obiettivo utilizzando un esempio reale di creazione di un componente Scheda profilo utente.
Styling dei componenti in React
Potresti già essere a conoscenza del modo normale di definire lo stile dei componenti React utilizzando l'attributo classname insieme a un foglio di stile esterno:
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
Stili in linea
Ottenere lo stesso risultato con gli stili in linea funziona in modo abbastanza diverso. Per utilizzare gli stili in linea in React, utilizza l'attributo style, che accetta un oggetto JavaScript con proprietà camel. Esempio:
function MyComponent(){ return Inline Styled Component } Nota che il valore di riempimento non ha un'unità perché React aggiunge a 'px ' suffisso ad alcune proprietà numeriche di stile in linea. Nei casi in cui è necessario utilizzare altre unità, come 'em' o 'rem', specificare esplicitamente l'unità con il valore come stringa. L'applicazione di questo alla proprietà imbottitura dovrebbe essere imbottitura: '1,5 em' .
Inoltre, questi stili non hanno automaticamente il prefisso del fornitore, quindi è necessario aggiungere manualmente i prefissi del fornitore.
Migliora la leggibilità
La leggibilità di MyComponent diminuisce drasticamente se gli stili diventano troppi e tutto diventa goffo. Come mostrato di seguito, poiché gli stili sono solo oggetti, possono essere rimossi dal componente.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Costruire un componente della carta
Costruiamo il componente della scheda utente.
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> } Regola del pollice
La documentazione ufficiale di React si oppone all'utilizzo dello stile in linea come mezzo principale per definire lo stile dei progetti e consiglia invece di utilizzare l'attributo className.
Nota Alcuni esempi nella documentazione utilizzano uno stile per comodità, ma in genere non è consigliabile utilizzare l'attributo style come mezzo principale per applicare stili agli elementi.
Nella maggior parte dei casi, nome della classe s dovrebbero fare riferimento alle classi definite in un foglio di stile CSS esterno. Gli stili vengono spesso utilizzati nelle app React per aggiungere stili calcolati dinamicamente in fase di rendering.