React CSS Styling : Appliquez des Styles à Vos Composants React

1. Utilisation de Fichiers CSS Globaux

Les fichiers CSS globaux sont la méthode la plus simple pour appliquer des styles à vos composants React. Vous pouvez importer un fichier CSS dans votre application et utiliser ses classes directement dans vos composants.

📋 Copier le code

/* styles.css */
.bouton {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.bouton:hover {
    background-color: #45a049;
}

/* App.js */
import React from 'react';
import './styles.css';

function Bouton() {
    return (
        <button className="bouton">
            Cliquez ici
        </button>
    );
}

ReactDOM.render(<Bouton />, document.getElementById('root'));
        

Explication détaillée :

1. /* styles.css */ :
   • Ce fichier contient des règles CSS pour définir l'apparence d'un bouton.
   • .bouton définit les styles de base pour la classe bouton.
   • .bouton:hover définit les styles lorsqu'un utilisateur survole le bouton.
2. import './styles.css'; :
   • Cette ligne importe le fichier CSS global dans votre composant React.
3. className="bouton" :
   • Dans React, utilisez toujours className au lieu de class pour appliquer des styles CSS.

2. Stylisation Locale avec CSS Modules

Avec CSS Modules, chaque fichier CSS est encapsulé et n'affecte que le composant qui l'importe. Cela évite les conflits de noms de classes entre différents composants. Voici un exemple :

📋 Copier le code

/* Bouton.module.css */
.bouton {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.bouton:hover {
    background-color: #45a049;
}

/* Bouton.js */
import React from 'react';
import styles from './Bouton.module.css';

function Bouton() {
    return (
        <button className={styles.bouton}>
            Cliquez ici
        </button>
    );
}

ReactDOM.render(<Bouton />, document.getElementById('root'));
        

Explication détaillée :

1. /* Bouton.module.css */ :
   • Ce fichier CSS est spécifiquement lié au composant Bouton.
   • Les noms de classes sont automatiquement encapsulés pour éviter les conflits.
2. import styles from './Bouton.module.css'; :
   • Cette ligne importe les styles définis dans le fichier Bouton.module.css.
   • Les noms de classes sont accessibles via l'objet styles.
3. className={styles.bouton} :
   • Applique la classe CSS encapsulée bouton au bouton.
   • Les styles ne seront appliqués qu'à ce composant spécifique, évitant ainsi toute collision avec d'autres composants.

3. Styles Inline avec React

Les styles inline permettent d'appliquer des styles directement dans vos composants React. Bien que cette méthode soit moins recommandée pour des projets volumineux, elle peut être utile pour des cas simples ou ponctuels. Voici un exemple :

📋 Copier le code

function Bouton() {
    const styleBouton = {
        backgroundColor: '#4CAF50',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer'
    };

    return (
        <button style={styleBouton}>
            Cliquez ici
        </button>
    );
}

ReactDOM.render(<Bouton />, document.getElementById('root'));
        

Explication détaillée :

1. const styleBouton = { ... } :
   • Cet objet définit les styles CSS pour le bouton.
   • Les propriétés CSS doivent être écrites en camelCase (par exemple, backgroundColor au lieu de background-color).
2. style={styleBouton} :
   • Applique les styles définis dans l'objet styleBouton au bouton.

4. Exemple Complet : Combinaison de Styles Globaux et Locaux

Imaginons que vous souhaitez combiner des styles globaux et locaux pour un composant. Voici comment cela peut être fait :

📋 Copier le code

/* styles.css */
.conteneur {
    padding: 20px;
    background-color: #f0f0f0;
}

/* Bouton.module.css */
.bouton {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.bouton:hover {
    background-color: #45a049;
}

/* App.js */
import React from 'react';
import './styles.css';
import styles from './Bouton.module.css';

function Bouton() {
    return (
        <div className="conteneur">
            <button className={styles.bouton}>
                Cliquez ici
            </button>
        </div>
    );
}

ReactDOM.render(<Bouton />, document.getElementById('root'));
        

Explication détaillée :

1. /* styles.css */ :
   • Ce fichier CSS global définit les styles pour le conteneur (.conteneur).
2. /* Bouton.module.css */ :
   • Ce fichier CSS local définit les styles uniquement pour le composant Bouton.
3. import './styles.css'; :
   • Importe les styles globaux dans l'application.
4. import styles from './Bouton.module.css'; :
   • Importe les styles locaux pour le composant Bouton.
5. className="conteneur" :
   • Applique les styles globaux du fichier styles.css au conteneur.
6. className={styles.bouton} :
   • Applique les styles locaux du fichier Bouton.module.css au bouton.

5. Meilleures Pratiques pour le Stylage dans React

Pour styliser efficacement vos applications React, voici quelques conseils :

• Privilégiez les CSS Modules pour des styles encapsulés : Cela évite les conflits de noms de classes entre différents composants.
• Utilisez des fichiers CSS globaux pour des styles partagés : Par exemple, pour les styles de mise en page ou les thèmes généraux.
• Évitez les styles inline pour des projets complexes : Ils peuvent rendre le code difficile à maintenir à grande échelle.
• Considérez des bibliothèques comme Styled Components ou Emotion : Elles offrent une gestion avancée des styles et sont particulièrement utiles pour des designs personnalisés.

Conclusion

Vous avez maintenant appris à styliser vos applications React avec différentes méthodes : fichiers CSS globaux, CSS Modules, et styles inline. En choisissant la bonne approche selon vos besoins, vous pouvez créer des interfaces utilisateur visuellement attractives et performantes.

Prochain chapitre : Styling avec Sass