Il codice di React è creato in JSX e per inserire CSS in React ci sono diversi modi che vi vado a esporre.
Metodo Classico: inserire il collegamento a un file css
Questo è un metodo che vi consiglio di preferire. Si importa un file esterno css all’interno del file in cui abbiamo bisogno la classe.
Se abbiamo bisogno di un css generico, come in questo caso, può essere quello dello stile del template vi consiglio di inserire il file nella stessa cartella del file App.js. Ricordatevi che abbiamo già un file App.css, l’utilizzo del classico file style.css può dare più comprensione del suo utilizzo come file di stile.
import './style.css'
Invece se necessitiamo di un file specifico per lo stile di un componente, ad esempio Orologio.js, vi consiglio di creare una cartella specifica per il componente dove avrete:
Orologio
- Orologio.js
- Orologio.css
Il motivo di questa struttura è quello di sfruttare al meglio la funzionalità tipica di React, di replicabilità dei componenti. Se avremo bisogno dello stesso componente, ma in un’altra applicazione, ci basterà copiare la cartella e ritroveremo tutti i file necessari al suo immediato funzionamento.
A questo punto inserimento l’import direttamente nel file Orologio.js
import 'Orologio.css'
CSS inline
Se vogliamo scrivere direttamente il CSS nel tag che vogliamo stilizzare, ricordandoci che dovremo utilizzare il cammelcase, la sintassi sarà questa:
<p style={{ textTrasform: "uppercase" }}></p>
CSS come variabile
Possiamo creare un CSS inline attraverso una variabile al di sopra del return:
const pStyle : { textTrasform: "uppercase" }
Mentre all’interno del tag da stilizzare riporteremo semplicemente la variabile.
<p style={ pStyle }></p>
Utilizzare i metodi JS
Se vogliamo utilizzare un metodo JS per creare tutte le lettere maiuscole, ad una stringa, possimo crearlo così:
<p>{ 'sono una stringa'.toUpperCase() }</p>
Styled Components
COMING SOON!