Utilisation des styles CSS dans React

Il existe plusieurs façons d'utiliser CSS dans les applications React.

Voici quelques méthodes courantes et des instructions détaillées sur la façon de les implémenter dans React.

Styles en ligne

Dans React, l'utilisation de styles CSS directement sur les éléments se fait au moyen de styles en ligne.

Les styles en ligne transmettent les styles CSS directement à l'attribut style de l'élément sous forme d'objet. Chaque propriété de style est écrite en camelCase au lieu du nom de propriété CSS traditionnel.

Utiliser directement à l'intérieur de l'élément :

Exemple

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Bonjour Style!</h1>
      <p>Ajoutez un peu de style!</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Vous pouvez également créer un objet avec des informations de style et y faire référence dans l'attribut style :

Exemple

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  // Définir un objet de style en ligne
  const containerStyle = {
    padding: '20px',
    backgroundColor: '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Bonjour, le monde!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Dans l'exemple ci-dessus, containerStyle et titleStyle sont deux objets de style en ligne appliqués respectivement aux éléments div et h1. Voici les points clés :

  • Utilisez camelCase pour les propriétés CSS (par exemple,backgroundColorau lieu debackground-color）。
  • Toutes les valeurs des propriétés de style sont passées sous forme de chaînes (sauf les valeurs numériques, qui peuvent être utilisées directement et React ajoutera automatiquement les unités).

Les styles en ligne peuvent également changer dynamiquement en fonction de l'état du composant :

Exemple

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const [isHighlighted, setIsHighlighted] = useState(false);

  const containerStyle = {
    padding: '20px',
    backgroundColor: isHighlighted ? '#ffff99' : '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Bonjour, le monde!</h1>
      <button onClick={() => setIsHighlighted(!isHighlighted)}>
        Basculer le surlignage
      </button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Utilisation des fichiers de style

Vous pouvez écrire des styles CSS dans un fichier séparé, utilisez simplement l'extension de fichier.csspour enregistrer le fichier, puis importez-le dans votre application.

Créez un fichier de style nommé App.css et ajoutez le code CSS suivant :

Exemple

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Dans votre application, importez la feuille de style App.css :

Exemple

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

const Header = () => {
  return (
    <>
      <h1>Bonjour Style!</h1>
      <p>Ajoutez un peu de style!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Modules CSS

Une autre façon d'ajouter des styles à une application est d'utiliser les modules CSS.

Les modules CSS sont une convention de nommage de fichiers CSS à portée locale. Avec cette approche, les noms de classes CSS et les noms d'animations ont une portée locale par défaut.

Les modules CSS sont très pratiques pour les composants placés dans des fichiers séparés.

Utilisez l'extension.module.csspour créer des modules CSS, par exemple : MyComponent.module.css.

Exemple

/* MyComponent.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

Importez la feuille de style dans l'application :

Exemple

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Bonjour, le monde!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);
Autres extensions