Le librerie CSS-in-JS, come i componenti con stile, sono diventate più popolari negli ultimi anni. Incapsulano CSS fino al livello del componente e consentono di utilizzare JavaScript per definire stili riutilizzabili.
Usando i componenti in stile, puoi mantenere l'architettura basata sui componenti che React già rafforza. Ma anche la biblioteca ha degli aspetti negativi.
Come funzionano i componenti con stile
Il componenti in stile La libreria CSS-in-JS ti consente di scrivere CSS all'interno dei file dei componenti. La sua sintassi è la stessa dei CSS, quindi è abbastanza facile da imparare. È una perfetta via di mezzo per gli sviluppatori JavaScript che tendono a stare lontano dal puro CSS.
Per vedere come funziona, considera il seguente componente Title che esegue il rendering di un elemento h1.
cost Titolo = styled.h1`
dimensione del font: 1.5 em;
allineamento testo: centro;
colore rosso;
`;
Puoi usare questo componente come qualsiasi altro componente React.
cost Casa = () => {
Restituzione (
<Titolo>Un'intestazione componente con stile</Title>
)
}
È anche molto potente perché rende più facile lavorare con oggetti di scena e stato.
Ad esempio, il colore e lo sfondo di questo componente dipendono dagli oggetti di scena.
importare in stile da "componenti in stile";cost Pulsante = pulsante.con stile`
imbottitura: 0.8 rem 1.6 rem;
colore di sfondo: ${(oggetti di scena) => (props.primario? "viola": "bianca")};
confine: 1px solido #00000;
colore: ${(oggetti di scena) => (props.primario? "bianca": "viola")};
`;
esportarepredefinitofunzioneCasa() {
Restituzione <Pulsante primario>Primario</Button>
}
Con i componenti in stile, non è necessario passare manualmente gli oggetti di scena al CSS. È automaticamente disponibile, semplificando gli stili di scrittura che dipendono dai dati del componente.
Vantaggi dell'utilizzo di componenti stilizzati
Ecco alcuni vantaggi dell'utilizzo della libreria dei componenti in stile.
Risolve i problemi di specificità CSS
I componenti stilizzati eliminano i problemi di specificità poiché incapsula i CSS all'interno di un componente. Ciò significa che non devi preoccuparti che i nomi delle classi si scontrino o che l'interfaccia utente si trasformi in un pasticcio a causa di conflitti tra i nomi delle classi.
Ti consente di scrivere CSS all'interno di componenti
Come si vede dall'esempio del componente button, styled-components consente di combinare CSS e JS nello stesso file. Quindi, non è necessario creare un file CSS separato o continuare a passare da un file all'altro.
Questo è un enorme vantaggio quando si creano kit dell'interfaccia utente perché si archiviano tutte le funzionalità dei componenti in un unico file.
A parte questo, scrivere CSS all'interno dei componenti. Semplifica la condivisione di oggetti di scena e stati con gli stili.
Consente il controllo del tipo
Con i componenti stilizzati, puoi controllare il tipo di oggetti di scena e valori utilizzati nei tuoi stili. Ad esempio, puoi riscrivere il componente del pulsante sopra usando TypeScript.
interfacciaoggetti di scena{
primario: booleano
}
const Button = styled.button<oggetti di scena>`
imbottitura: 0.8 rem 1.6 rem;
colore di sfondo: ${(oggetti di scena) => (props.primario? "viola": "bianca")};
confine: 1px solido #00000;
colore: ${(oggetti di scena) => (props.primario? "bianca": "viola")};
`;
Utilizzo di TypeScript nel componente significa controllare gli errori di tipo durante il codice e ridurre i tempi di debug.
Supporta temi fuori dagli schemi
Aggiunta di un tema scuro o qualsiasi altro tema per la tua applicazione può essere difficile e richiedere molto tempo. Tuttavia, i componenti Styled semplificano il processo. Puoi aggiungere temi alla tua app esportando a
cost Pulsante = styled.main`
colore di sfondo: ${props => props.theme.light.background};
colore: ${oggetti di scena => props.theme.light.fontColor};
`
<ThemeProvider tema={tema}>
<Pulsante>
Pulsante luce
</Button>
</ThemeProvider>
Il componente ThemeProvider passa i temi a tutti i componenti con stile che avvolge. Questi componenti possono quindi utilizzare i valori del tema nei loro stili. In questo esempio, il pulsante utilizza i valori del tema per lo sfondo e i colori dei caratteri.
Contro dell'utilizzo di componenti stilizzati
Sebbene l'utilizzo della libreria dei componenti in stile abbia molti vantaggi, presenta anche degli svantaggi.
Non è indipendente dal framework
Scrivere CSS in JS significa separare i due in futuro sarà difficile, il che è terribile per la manutenibilità. Ad esempio, se mai decidessi di cambiare il tuo struttura JavaScript, dovrai riscrivere la maggior parte della tua base di codice.
Questo richiede tempo e denaro. Usando Moduli CSS o una libreria indipendente dal framework come l'emozione è più a prova di futuro.
Può essere difficile da leggere
La differenziazione tra componenti stilizzati e React può essere difficile, specialmente al di fuori di un sistema di progettazione atomica. Considera questo esempio:
<Principale>
<nav>
<ListItem>
<LinkText>Adotta un animale domestico</LinkText>
</ListItem>
<ListItem>
<LinkText>Donare</LinkText>
</ListItem>
</Nav>
<Intestazione>Adotta, don'fare acquisti!</Header>
<SecondaryBtn btnText="Donare" />
</Main>
L'unico modo per sapere quale componente contiene la logica di business è controllare se ha oggetti di scena. Inoltre, anche se i nomi dei componenti in questo esempio sono descrittivi, è comunque difficile visualizzarli.
Ad esempio, il componente Intestazione potrebbe essere un'intestazione, ma a meno che non controlli gli stili, potresti non sapere mai se si tratta di un h1, h2 o h3.
Alcuni sviluppatori risolvono questo problema utilizzando solo il componente con stile come wrapper e utilizzando i tag HTML semantici per gli elementi al suo interno.
In questo esempio, il componente di intestazione potrebbe utilizzare un tag h1.
<h1>Adotta, don'fare acquisti!</h1>
Puoi andare oltre definendo i componenti con stile in un altro file (ad es. styled.js), che puoi successivamente importare in un componente React.
importare * come In stile da './stile'
// usa styled.components
<in stile. Principale>
// codice
</styled.Main>
In questo modo avrai una visione chiara di quali componenti sono stati assegnati allo stile e quali sono i componenti di React.
I componenti con stile vengono compilati in fase di esecuzione
Per le applicazioni che utilizzano componenti con stile, il browser scarica il CSS e lo analizza utilizzando JavaScript prima di inserirli nella pagina. Ciò causa problemi di prestazioni perché l'utente deve scaricare molto JavaScript nel caricamento iniziale.
Il CSS statico è molto più veloce. Non è necessario che venga elaborato prima che il browser lo utilizzi per lo stile delle pagine. Tuttavia, la libreria dei componenti in stile migliora ad ogni versione. Se puoi permetterti prestazioni ridotte, vai avanti e usalo.
Quando utilizzare i componenti con stile
Ad alcuni sviluppatori piace scrivere CSS in file JS, mentre altri preferiscono avere file CSS separati. Il modo in cui scegli di scrivere CSS dovrebbe in definitiva dipendere dal progetto stesso e da ciò che piace a te o al tuo team. I componenti stilizzati sono una buona scelta per la creazione di una libreria dell'interfaccia utente poiché tutto può essere contenuto in un unico file ed essere facilmente esportato e riutilizzato.
Se preferisci scrivere CSS puro, usa i moduli CSS. Puoi avere file CSS separati e, per impostazione predefinita, applica localmente gli stili. Indipendentemente dalla scelta che fai, avere una solida conoscenza CSS è essenziale.
