Comment styliser les composants React à l'aide de modules CSS

Comment styliser les composants React à l'aide de modules CSS

Les modules CSS fournissent un moyen d'étendre localement les noms de classe CSS. Vous n'avez pas à vous soucier de remplacer les styles lorsque vous utilisez le même nom de classe.





Découvrez comment fonctionnent les modules CSS, pourquoi vous devriez les utiliser et comment les implémenter dans un projet React.



Que sont les modules CSS ?

La Documentation des modules CSS décrire un module CSS comme un fichier CSS dont les noms de classe sont définis localement par défaut. Cela signifie que vous pouvez adresser des variables CSS portant le même nom dans différents fichiers CSS.





Vous écrivez des classes de modules CSS comme des classes normales. Ensuite, le compilateur génère des noms de classe uniques avant d'envoyer le CSS au navigateur.

Par exemple, considérez la classe .btn suivante dans un fichier appelé styles.modules.css :



.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

Pour utiliser ce fichier, vous devez l'importer dans un fichier JavaScript.

import styles from "./styles.module.js"

Maintenant, pour référencer la classe .btn et la rendre disponible dans un élément, vous utiliseriez la classe comme indiqué ci-dessous :



class="styles.btn"

Le processus de construction remplacera la classe CSS par un nom unique du format comme _styles__btn_118346908.

L'unicité des noms de classe signifie que, même si vous utilisez le même nom de classe pour différents composants, ils n'entreront pas en collision. Vous pouvez garantir une plus grande indépendance du code puisque vous pouvez stocker les styles CSS d'un composant dans un seul fichier, spécifique à ce composant.



Cela simplifie le débogage, surtout si vous travaillez avec plusieurs feuilles de style. Vous n'aurez qu'à rechercher le module CSS pour un composant particulier.

Les modules CSS vous permettent également de combiner plusieurs classes via le compose mot-clé. Par exemple, considérez la classe .btn suivante ci-dessus. Vous pouvez 'étendre' cette classe dans d'autres classes en utilisant compose.

pouvez-vous voir qui voit votre linkedin

Pour un bouton d'envoi, vous pourriez avoir :

comment installer ubuntu sur macbook pro 
.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

Cela combine les classes .btn et .submit. Vous pouvez également composer des styles à partir d'un autre module CSS comme ceci :

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

Notez que vous devez écrire la règle de composition avant les autres règles.

Comment utiliser les modules CSS dans React

La façon dont vous utilisez les modules CSS dans React dépend de la façon dont vous créez l'application React.

Si vous utilisez create-react-app, les modules CSS sont configurés immédiatement. Cependant, si vous allez créer l'application à partir de zéro, vous devrez configurer les modules CSS avec un compilateur comme webpack.

Pour suivre ce tutoriel, vous devriez avoir :

  • Node installé sur votre machine.
  • Une compréhension de base des modules ES6.
  • Un basique compréhension de React .

Création d'une application réactive

Pour simplifier les choses, vous pouvez utiliser créer-réagir-app pour échafauder une application React.

Exécutez cette commande pour créer un nouveau projet React appelés modules de réaction css :

npx create-react-app react-css-modules

Cela générera un nouveau fichier appelé react-css-modules avec toutes les dépendances nécessaires pour démarrer avec React.

Création d'un composant de bouton

Vous allez créer un composant Button et un module CSS appelé Button.module.css dans cette étape. Dans le dossier src, créez un nouveau dossier appelé Composants. Dans ce dossier, créez un autre dossier appelé Button. Vous allez ajouter le composant Button et ses styles dans ce dossier.

Aller vers src/Composants/Bouton et créez Button.js.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

Ensuite, créez un nouveau fichier appelé Button.module.css et ajoutez ce qui suit.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Pour utiliser cette classe dans le composant Button, importez-la en tant que styles et référencez-la dans le nom de classe de l'élément button comme ceci :

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

Ceci est un exemple simple qui montre comment utiliser une seule classe. Vous pouvez partager des styles entre différents composants ou même combiner des classes. Pour cela, vous pouvez utiliser le mot-clé compose comme mentionné précédemment dans cet article.

Utiliser la composition

Tout d'abord, modifiez le composant Button avec le code suivant.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

Ce code rend le composant Button plus dynamique en acceptant une valeur de type comme accessoire. Ce type déterminera le nom de classe appliqué à l'élément bouton. Donc, si le bouton est un bouton d'envoi, le nom de la classe sera 'soumettre'. Si c'est 'error', le nom de la classe sera 'error', et ainsi de suite.

Pour utiliser le mot-clé compose au lieu d'écrire tous les styles pour chaque bouton à partir de zéro, ajoutez ce qui suit à Button.module.css.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

Dans cet exemple, la classe primaire et la classe secondaire utilisent la classe btn. En faisant cela, vous réduisez la quantité de code que vous devez écrire.

Vous pouvez aller encore plus loin avec un module CSS externe appelé couleurs.module.css , contenant les couleurs utilisées dans l'application. Vous pourrez ensuite utiliser ce module dans d'autres modules. Par exemple, créez le fichier colors.module.css à la racine du dossier Components avec le code suivant :

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Maintenant dans le fichier Button/Button.module.css, modifiez les classes primaire et secondaire pour utiliser les classes ci-dessus comme ceci :

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

Sass avec les modules CSS

Vous pouvez utiliser des modules CSS pour améliorer la modularité de votre base de code. Par exemple, vous pouvez créer une classe CSS simple pour un composant de bouton et réutiliser les classes CSS via la composition.

comment faire un portrait en mode iphone 7

Pour optimiser votre utilisation des modules CSS, utilisez Sass. Sass—Syntactically Awesome Style Sheets—est un préprocesseur CSS qui fournit une tonne de fonctionnalités. Ils incluent la prise en charge de l'imbrication, des variables et de l'héritage qui ne sont pas disponibles dans CSS. Avec Sass, vous pouvez ajouter des fonctionnalités plus complexes à votre application.