Modules CSS et composants stylisés pour le style dans Next.js

Le style est une partie importante de la création d'une application Next.js.

Parmi les options populaires figurent les modules CSS et les composants stylisés. Les deux ont leurs atouts et leurs cas d’utilisation différents.

Nous allons approfondir ces deux approches, comparer leurs avantages et aider à décider laquelle pourrait être la mieux adaptée au projet.

Que sont les modules CSS ?

1. Créer un fichier de module CSS : Créez un fichier avec l'extension .module.css.

 /* styles.module.css */
   .container {
     background-color: lightblue;
     padding: 20px;
     border-radius: 8px;
   }

2. Importation et utilisation des styles : Importez le module CSS dans votre composant, puis appliquez ces styles avec la prop className.

// components/StyledComponent.js
Meaning that one can import styles from './styles.module.css';

   export default function StyledComponent() {
     return <div className={styles.container}>Hello, CSS Modules!</div>;
   }

Que sont les composants stylisés ?

C'est une bibliothèque pour React et Next.js pour pouvoir écrire du CSS réel dans votre JavaScript.

Encore une fois, l'approche utilise des littéraux de modèle balisés pour styliser vos composants.

Les composants stylisés sont dynamiques, ce qui signifie que vous pouvez y transmettre des accessoires et modifier les styles en fonction de ces accessoires.

Comment utiliser des composants stylisés dans Next.Js ?

1. Installer des composants stylisés :

Tout d'abord, installez la bibliothèque.

npm install styled-components

2. Création et utilisation d'un composant stylisé :
Importez la fonction stylisée et définissez-y votre composant stylisé.

   // components/StyledComponent.js
   import styled from 'styled-components';

   const Container = styled.div`
     background-color: lightblue;
     padding: 20px;
     border-radius: 8px;
   `;
   ``

export default function StyledComponent() {
      return <Container>Hello, Styled Components!</Container>;
   }

Comparaison des modules CSS et des composants stylisés

1. Cadrage et isolement :

• Modules CSS : en empêchant la pollution de l'espace de noms global, il donne un style étendu par défaut.

• Composants stylisés : puisqu'ils font partie de la définition du composant, les styles sont naturellement étendus aux composants.

2. Style dynamique :

• Modules CSS : statiques, et une logique supplémentaire est nécessaire pour dynamiser les styles.

• Composants stylisés : style dynamique basé sur des accessoires natifs.

3. Courbe d'apprentissage :

• Modules CSS : faciles pour tous ceux qui connaissent le CSS traditionnel

• Composants stylisés : nécessite une connaissance de la bibliothèque de composants stylisés et des littéraux de modèles JavaScript.

4. Performances :

• Modules CSS : surcharge d'exécution proche de zéro ; il évalue les styles en CSS standard.

• Composants stylisés : surcharge d'exécution légèrement plus élevée pour générer des styles à la volée ; cependant, généralement négligeable.

5. Expérience développeur :

• Modules CSS : faciles pour les personnes qui aiment séparer le style de la logique.

• Composants stylisés : meilleure expérience de développement en colocalisant les styles avec leurs composants.

Lequel devriez-vous choisir ?

Le choix des modules CSS/composants stylables ou stylisés dépend principalement des besoins spécifiques aux projets et des préférences de l'équipe.

Choisissez les modules CSS si :

• Vous aimez le CSS traditionnel.

• Vous voulez de la simplicité et une faible surcharge d'exécution.

• Vous avez un énorme projet avec de nombreux développeurs familiers avec CSS mais pas avec le style basé sur JavaScript.

Choisissez des composants stylisés si :

• Vous aimez colocaliser des styles avec des composants.

• Vous aimeriez avoir des possibilités de style dynamiques.

• Vous souhaitez un système de thème avancé avec les dernières fonctionnalités CSS comme l'imbrication.

Conclusion

Nous avons examiné deux excellentes façons de styliser les applications Next.js, chacune présentant des avantages différents. Que vous optiez pour la simplicité et la facilité d'utilisation avec les modules CSS ou le dynamisme avec les composants stylisés, vous pourrez créer des styles magnifiques et maintenables pour vos projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!