Come modellare i componenti React con CSS

Puoi modellare le tue app e pagine React utilizzando una serie di tecniche. Il più semplice dei quali sarebbe scaricare una libreria di componenti React. Tuttavia, anche quando si utilizzano le librerie, prima o poi sarà necessario aggiungere stili personalizzati. Allora, qual è il modo migliore per farlo?

Per progetti su piccola scala, puoi modellare comodamente la tua app utilizzando gli stili in linea , i moduli o scrivendo tu stesso le specifiche className . E per i progetti dinamici, come le app, è meglio utilizzare una libreria che ti consenta di implementare facilmente gli oggetti di scena.

In alternativa, puoi utilizzare un kit di utilità come Tailwind UI, che viene fornito con stili predefiniti. Se devi eseguire il rendering di un mockup o di una presentazione, i kit dell'interfaccia utente compatibili con React sono la strada da percorrere.

Stile pratico con className

In React, gli stili CSS pratici vengono applicati tramite la proprietà className .

Questo è anche l'equivalente dell'utilizzo di un foglio di stile per il tuo progetto. Poiché React è guidato dalla struttura dei componenti, puoi importare i tuoi fogli di stile solo per esigenze specifiche.

Diamo un'occhiata a un esempio.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

E questo sarebbe il risultato:

È una tecnica alla vaniglia del tutto valida. Inoltre, viene spesso utilizzato per dichiarare variabili globali che verranno riutilizzate tra i componenti principali.

L'unico avvertimento è che man mano che il tuo progetto cresce, cresce anche il potenziale per i conflitti di denominazione.

Allo stesso modo, il costo dell'efficienza della gestione di centinaia di fogli di stile è assurdamente alto.

Utilizzo di JSX per gli stili in linea

React ti consente di modellare gli elementi DOM utilizzando stili inline. Mentre la logica CSS rimane la stessa, lo stile stesso deve passare attraverso JavaScript. Questo è anche noto come JSX.

Diamo un'occhiata a un esempio:

Headline.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Una cosa che noterai è che invece di scrivere line-height usiamo lineHeight .

La spiegazione di ciò è che "Dato che JSX è più vicino a JavaScript che a HTML, React DOM utilizza la convenzione di denominazione delle proprietà camelCase invece dei nomi degli attributi HTML". .

Gli stili in linea vengono in genere utilizzati per mostrare esempi, ma anche per aggiungere uno stile dinamico a elementi specifici. Inoltre, gli stili inline non supportano pseudo-elementi o media query, poiché puoi solo passare style . L'uso di un foglio di stile è un'alternativa migliore.

Creazione di un ambito locale con i moduli CSS

Se vuoi applicare stili personalizzati ai componenti senza denominare le collisioni, un modo per farlo è attraverso i moduli CSS.

Questo è un approccio in cui è possibile applicare l'ambito locale a ciascun componente individualmente.

Così:

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

Puoi anche fare cose come la composizione , dove chiami uno stile specifico da un altro foglio di stile, evitando la necessità di riscrivere la stessa logica due volte.

 .header { composes: header from './style.css'; }

CSS in JS

A differenza di framework come Vue e Svelte, React non fornisce una propria interfaccia di stile.

Quindi, mentre puoi scrivere CSS per i componenti usando i metodi sopra menzionati, l'approccio del Santo Graal consiste nell'usare CSS nelle librerie JS. Ogni libreria ha i suoi punti di forza e di debolezza, ma in generale i vantaggi rimangono gli stessi:

• Puntelli per varie variazioni di stile.
• Temi accessibili.
• Ambito di stile basato sui componenti.
• Variabili CSS dinamiche che utilizzano funzioni JavaScript.

La soluzione più popolare per CSS in JS è Styled Components.

E altre scelte degne di nota includono Emotion e Linaria. Per il bene della demo, diamo un'occhiata a come i CSS sono integrati in un componente React usando la libreria Styled Components.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Per prima cosa, creiamo un nuovo componente chiamato HeaderWrapper che renderà un contenitore <section> per il nostro titolo di intestazione. Quindi creiamo un altro componente chiamato HeaderTitle e gli passiamo le variabili CSS. Quindi, in un certo senso, è esattamente come lavorare con i componenti Web, solo nel contesto di React.

Utilizzo di una struttura CSS

Non è che tutto nel front-end si stia muovendo verso framework e librerie.

Ha più a che fare con il fatto che iniziare un progetto dal nulla è inefficiente. Un framework come Tailwind CSS aiuta ad alleviare la necessità di scrivere da zero tutte le strutture delle applicazioni. Il modo in cui Tailwind CSS funziona è che il framework fornisce classi di utilità predeterminate, consentendoti di strutturare un layout senza dover scrivere CSS indipendenti.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Quindi, invece di definire lo stile del componente usando Constants , possiamo scrivere direttamente lo stile come specificato dal framework. Un metodo come questo è estremamente efficiente e puoi, ad esempio, importare componenti dell'interfaccia utente (come le schede) realizzati da altri.

Tailwind CSS è particolarmente popolare perché puoi copiare e incollare direttamente gli snippet e usarli nella progettazione della tua app senza alcuna conseguenza.

Utilizzo di una libreria dell'interfaccia utente

L'ultimo metodo per applicare lo stile ai componenti di React consiste nell'usare una libreria dell'interfaccia utente. A differenza di un framework, una libreria dell'interfaccia utente segue le linee guida di stile. Quindi, in molti modi, viene fornito con uno stile che è già predeterminato. Artisti del calibro di Mantine e Material UI sono alcune delle scelte da fare.

L'unico "inconveniente" è che devi dedicare un bel po' del tuo tempo all'apprendimento di quella particolare libreria. Ma lo stesso si potrebbe dire per i framework. Nonostante la barriera all'ingresso, sia i framework CSS che le librerie dell'interfaccia utente sono il gold standard nello stile dei componenti React.