Styliser React à l'aide de CSS
Il existe de nombreuses façons de styliser React avec CSS, ce didacticiel examinera de plus près trois méthodes courantes :
- Style en ligne
- Feuilles de style CSS
- Modules CSS
Style en ligne
Pour styliser un élément avec l'attribut inline style, la valeur doit être un objet JavaScript :
Exemple:
Insérez un objet avec les informations de style :
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Remarque : dans JSX, les expressions JavaScript sont écrites entre accolades, et puisque les objets JavaScript utilisent également des accolades, le style dans l'exemple ci-dessus est écrit entre deux ensembles d'accolades {{}}.
Noms de propriété camelCased
Étant donné que le CSS en ligne est écrit dans un objet JavaScript, les propriétés avec des séparateurs de tirets, comme background-color, doivent être écrites avec une syntaxe camel :
Exemple:
Utiliser à la backgroundColorplace de
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Objet JavaScript
Vous pouvez également créer un objet avec des informations de style et y faire référence dans l'attribut style :
Exemple:
Créez un objet style nommé 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>
</>
);
}
Obtenir une certification!
95 $ S'INSCRIRE
Feuille de style CSS
Vous pouvez écrire votre style CSS dans un fichier séparé, enregistrez simplement le fichier avec l'
.cssextension de fichier et importez-le dans votre application.
App.css :
Créez un nouveau fichier appelé "App.css" et insérez-y du code CSS :
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Remarque : Vous pouvez appeler le fichier comme vous le souhaitez, souvenez-vous simplement de l'extension de fichier correcte.
Importez la feuille de style dans votre application :
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'));
Modules CSS
Une autre façon d'ajouter des styles à votre application consiste à utiliser des modules CSS.
Les modules CSS sont pratiques pour les composants placés dans des fichiers séparés.
Le CSS à l'intérieur d'un module n'est disponible que pour le composant qui l'a importé, et vous n'avez pas à vous soucier des conflits de noms.
Créez le module CSS avec l' .module.css
extension, exemple : my-style.module.css.
Créez un nouveau fichier appelé "my-style.module.css" et insérez-y du code CSS :
mon-style.module.css :
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Importez la feuille de style dans votre composant :
Car.js :
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Importez le composant dans votre application :
index.js :
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));