Conosciamo tutti il modo standard di collegare un foglio di stile Vai all’email <head> di un documento HTML, giusto? Questo è solo uno dei tanti modi in cui possiamo scrivere CSS. Ma che aspetto ha lo stile delle cose in un'applicazione a pagina singola (SPA), ad esempio in un progetto React?
Risulta che ci sono diversi modi per definire lo stile di un'applicazione React. Alcuni si sovrappongono allo stile tradizionale, altri non così tanto. Ma contiamo tutti i modi in cui possiamo farlo.
Importazione di fogli di stile esterni
Come suggerisce il nome, React può importare file CSS. Il processo è simile a come colleghiamo il file CSS nell'HTML <head>:
- Crea un nuovo file CSS nella directory del tuo progetto.
- Scrivi CSS.
- Importalo nel file React.
Mi Piace
import "./style.css";Di solito va all'inizio del file dove avvengono altre importazioni:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;In questo esempio, un file CSS viene importato in un file App.js dal /Components/css cartella.
Scrivi stili in linea
Potresti essere abituato a sentire che lo stile in linea non è poi così eccezionale per la manutenibilità e quant'altro, ma ci sono sicuramente situazioni (eccone uno!) dove ha senso. E la manutenibilità è un problema minore in React, poiché spesso il CSS si trova già comunque all'interno dello stesso file.
Questo è un esempio semplicissimo di stile in linea in React:
<div className="main" style={{color:"red"}}>Un approccio migliore, tuttavia, è utilizzare gli oggetti:
- Innanzitutto, crea un oggetto che contenga stili per diversi elementi.
- Quindi aggiungilo a un elemento usando il comando
styleattributo e quindi selezionare la proprietà a cui applicare lo stile.
Vediamolo nel contesto:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Questo esempio contiene a styles oggetto contenente altri due oggetti, uno per il .main class e l'altra per un input di testo, che contengono regole di stile simili a quelle che ci aspetteremmo di vedere in un foglio di stile esterno. Tali oggetti vengono quindi applicati al file style attributo degli elementi presenti nel markup restituito.
Tieni presente che quando si fa riferimento agli stili vengono utilizzate le parentesi graffe anziché le virgolette che normalmente utilizzeremmo nel semplice HTML.
Utilizza i moduli CSS
Moduli CSS… che diavolo è successo a quelli, giusto? Hanno il vantaggio di variabili con ambito locale e possono essere utilizzati insieme a React. Ma cosa sono, ancora una volta, esattamente?
Citando il la documentazione del repository:
I moduli CSS funzionano compilando singoli file CSS sia in CSS che in dati. L'output CSS è un CSS normale, globale, che può essere inserito direttamente nel browser o concatenato insieme e scritto in un file per l'utilizzo in produzione. I dati vengono utilizzati per mappare i nomi leggibili che hai utilizzato nei file sul CSS di output sicuro a livello globale.
In termini più semplici, i moduli CSS ci consentono di utilizzare lo stesso nome di classe in più file senza conflitti poiché a ciascun nome di classe viene assegnato un nome programmatico univoco. Ciò è particolarmente utile nelle applicazioni più grandi. Ogni nome di classe ha come ambito locale il componente specifico in cui viene importato.
Un foglio di stile del modulo CSS è simile a un normale foglio di stile, solo con un'estensione diversa (ad es styles.module.css). Ecco come sono impostati:
- Crea un file con
.module.csscome estensione. - Importa quel modulo nell'app React (come abbiamo visto prima)
- Aggiungere un
classNamea un elemento o componente e fare riferimento allo stile particolare dagli stili importati.
Esempio semplicissimo:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Utilizza componenti con stile
Hai usato? componenti in stile? È abbastanza popolare e ti consente di creare componenti personalizzati utilizzando i CSS effettivi nel tuo JavaScript. Un componente con stile è fondamentalmente un componente React con (preparatevi) stili. Alcune delle funzionalità includono nomi di classi univoci, stili dinamici e una migliore gestione dei CSS poiché ogni componente ha i propri stili separati.
Installa il pacchetto npm styled-components nella riga di comando:
npm install styled-componentsSuccessivamente, importalo nell'app React:
import styled from 'styled-components'Crea un componente e assegnagli una proprietà con stile. Notare l'uso di valori letterali modello indicati da apici inversi nel file Wrapper oggetto:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Quanto sopra Wrapper il componente verrà reso come un div che contiene quegli stili.
Stile condizionale
Uno dei vantaggi dei componenti con stile è che i componenti stessi sono funzionali, poiché è possibile utilizzare oggetti di scena all'interno del CSS. Ciò apre la porta a dichiarazioni condizionali e al cambiamento degli stili in base a uno stato o a un sostegno.
Ecco una demo che lo mostra:
Qui stiamo manipolando i div display proprietà sullo stato di visualizzazione. Questo stato è controllato da un pulsante che attiva/disattiva lo stato del div quando viene cliccato. Questo, a sua volta, alterna tra gli stili di due stati diversi.
In linea if dichiarazioni, usiamo a ? invece del solito if/else sintassi. IL else la parte è dopo il punto e virgola. E ricorda di chiamare o utilizzare sempre lo stato dopo che è stato inizializzato. In quest'ultima demo, ad esempio, lo stato dovrebbe essere al di sopra di Wrapper stili del componente.
Buon stile React!
Questo è tutto, gente! Abbiamo esaminato una serie di modi diversi per scrivere stili in un'applicazione React. E non è che uno sia migliore degli altri; l'approccio che usi dipende dalla situazione, ovviamente. Spero che ora tu li abbia capiti bene e sappia che hai un sacco di strumenti nel tuo arsenale di styling React.
