Styling Reagire usando CSS
Esistono molti modi per definire React con CSS, questo tutorial analizzerà più da vicino tre modi comuni:
- Stile in linea
- Fogli di stile CSS
- Moduli CSS
Stile in linea
Per definire lo stile di un elemento con l'attributo stile inline, il valore deve essere un oggetto JavaScript:
Esempio:
Inserisci un oggetto con le informazioni sullo stile:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Nota: in JSX, le espressioni JavaScript sono scritte all'interno di parentesi graffe e, poiché anche gli oggetti JavaScript utilizzano parentesi graffe, lo stile nell'esempio sopra è scritto all'interno di due serie di parentesi graffe {{}}.
nomi di proprietà camelCased
Poiché il CSS inline è scritto in un oggetto JavaScript, le proprietà con separatori di trattino, come background-color, devono essere scritte con la sintassi camel case:
Esempio:
Utilizzare backgroundColoral posto di
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Oggetto JavaScript
Puoi anche creare un oggetto con informazioni sullo stile e fare riferimento ad esso nell'attributo style:
Esempio:
Crea un oggetto di stile chiamato myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Ottieni la certificazione!
ISCRIVITI A $95
Foglio di stile CSS
Puoi scrivere il tuo stile CSS in un file separato, salvare semplicemente il file con l'
.cssestensione del file e importarlo nella tua applicazione.
App.css:
Crea un nuovo file chiamato "App.css" e inserisci del codice CSS al suo interno:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Nota: puoi chiamare il file come preferisci, ricorda solo l'estensione del file corretta.
Importa il foglio di stile nella tua applicazione:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
Moduli CSS
Un altro modo per aggiungere stili alla tua applicazione è utilizzare i moduli CSS.
I moduli CSS sono utili per i componenti che vengono inseriti in file separati.
Il CSS all'interno di un modulo è disponibile solo per il componente che lo ha importato e non devi preoccuparti di conflitti di nome.
Crea il modulo CSS con l' .module.css
estensione, esempio: my-style.module.css.
Crea un nuovo file chiamato "my-style.module.css" e inserisci del codice CSS al suo interno:
my-style.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Importa il foglio di stile nel tuo componente:
Car.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Importa il componente nella tua applicazione:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));