Les composants de Styling React se sont améliorés au fil des ans et sont devenus beaucoup plus faciles avec diverses techniques et stratégies. Dans ce didacticiel, nous allons apprendre à styliser les composants React à l'aide de quatre stratégies de style principales – avec des exemples sur la façon de les utiliser. Dans le processus, j'expliquerai les inconvénients et les avantages de ces stratégies de style, et à la fin de ce tutoriel, vous saurez tout sur le style des composants React et comment ils fonctionnent ainsi que les différentes méthodes qui peuvent être utilisées pour styler ces composants. .

Remarque: Une compréhension de base de ReactJS et CSS serait utile pour ce didacticiel.

Que signifie le «style» dans les applications React?

La raison pour laquelle vous styliserez votre React L'application n'est pas différente de celle que vous avez en tête lorsque vous stylisez d'autres sites Web ou applications Web sur lesquels vous avez travaillé. Le style dans les applications React décrit comment les composants ou éléments React sont affichés à l'écran ou sur tout autre support.

L'essence même de la construction d'interfaces utilisateur frontales avec React est la souplesse avec laquelle il est possible de construire ces interfaces utilisateur en particulier en tant que composants et également de les styliser pour nous donner un super look et expérience. Il est important de savoir que quelle que soit la stratégie de style que vous décidiez d'utiliser, c'est toujours du CSS – vous écrivez du CSS comme vous l'avez toujours fait. La différence est que les stratégies (que nous examinerons) facilitent le processus en raison de l'unicité de React.

Stratégies de style majeures dans React

Il existe différentes stratégies à suivre lors de la planification du style des composants React. , ces stratégies ont également augmenté et évolué au fil des ans. Dans ce tutoriel, nous parlerions des stratégies de style les plus populaires et les plus modernes, et comment les utiliser pour styliser nos composants React. Ces stratégies de style incluent:

1. Feuilles de style CSS et SCSS
   Cela implique l'utilisation de feuilles de style distinctes comme notre façon conventionnelle de styliser nos sites Web HTML avec CSS ou un préprocesseur CSS appelé SASS .
2. Modules CSS
   Un module CSS est un fichier CSS dans lequel tous les noms de classe et les noms d'animation sont étendus localement par défaut.
3. styled-components
   styled-components est une bibliothèque pour React et React Native qui vous permet pour utiliser des styles au niveau des composants dans votre application qui sont écrits avec un mélange de JavaScript et CSS en utilisant une technique appelée CSS-in-JS .
4. JSS
   JSS est un outil de création pour CSS qui vous permet d'utiliser JavaScript pour décrire les styles de manière déclarative, sans conflit et réutilisable. Il peut être compilé dans le navigateur, côté serveur ou au moment de la construction dans Node.

Dans la section suivante de ce tutoriel, nous allons parler de chacune de ces stratégies de style avec des exemples de leur syntaxe.

1. Feuilles de styles CSS et SASS

Les feuilles de styles CSS ou SCSS sont une stratégie de style qui implique l'utilisation de feuilles de style CSS ou SASS externes qui peuvent être importées dans vos composants React en fonction de l'endroit où vous souhaitez appliquer le style.

Par exemple, nous avons un fichier SASS de styles appelé Box.scss que nous devons utiliser dans un composant appelé Box.js ci-dessous est le code de notre fichier SASS.

 // Box.scss
.Boîte {
  marge: 40px;
  bordure: 5px noir;
}

.Box_content {
  taille de police: 16px;
  alignement du texte: centre;
} 

Pour utiliser ce style à l'intérieur de notre composant Box, tout ce que nous devons faire est d'importer le fichier SASS directement dans notre composant Box.js comme ceci:

 import React from 'react »
import './Box.css';

const Box = () => (
  

    
  Styling React Components 
  
);

exporter la boîte par défaut; 

Après avoir créé les styles et les avoir importés dans le fichier Box.js nous pouvons ensuite définir l'attribut className pour qu'il corresponde à ce que nous avons dans la feuille de style. [19659009] En utilisant cette stratégie, vous pouvez également tirer parti des cadres existants comme; Bulma, Bootstrap, etc. Ces frameworks vous fournissent des classes et des composants existants que vous pouvez connecter à votre application React sans styler tous les aspects de votre application.

Avantages de l'utilisation des feuilles de style CSS et SASS

1. C'est beaucoup plus populaire que les autres stratégies de style, il existe donc une tonne de ressources utiles lorsque vous rencontrez un bogue.
2. Mise en cache et performances
   Les fichiers CSS standard sont faciles à optimiser pour le navigateur, en mettant en cache les fichiers locaux pour des visites répétées et, en fin de compte, des gains de performances.
3. Sans opinion et universel
   CSS et SASS sont universels et n'ont aucune opinion sur la façon dont vous rendez votre interface utilisateur, ce qui en fait un excellent choix pour les équipes qui ont un héritage CSS et migrent vers une nouvelle infrastructure ou reconstruisent leur site Web ou leur produit.
4. Itérer rapidement une nouvelle conception
   Vous pouvez très facilement extraire la feuille de style entière et en créer une nouvelle pour actualiser l'apparence de votre application sans
5. CSS Frameworks
   Les frameworks CSS sont utiles si vous êtes un nouveau développeur, ou si vous souhaitez travailler rapidement sur un prototype sans plonger profondément dans l'écriture de vos propres feuilles de style complètes . Les frameworks CSS vous fourniront des blocs de construction pour faire démarrer votre idée. Certains de ces cadres incluent Bootstrap, Bulma, Semantic UI, Materialise.

Défauts d'utilisation des feuilles de style CSS et SASS

1. Lisibilité
   Si elle n'est pas correctement structurée, une feuille de style CSS ou SASS peut devenir longue et difficile
2. Le CSS hérité peut perdurer pendant des années
   La plupart du temps, ces feuilles de style très volumineuses peuvent devenir si complexes et longues que le nettoyage de styles anciens, obsolètes ou même inutilisés peut être pénible. [19659048] Note : «Sass a deux syntaxes. La syntaxe la plus couramment utilisée est connue sous le nom de «SCSS» (pour «Sassy CSS») et est un surensemble de syntaxe CSS. Cela signifie que chaque feuille de style CSS valide est également SCSS valide. Les fichiers SCSS utilisent l'extension .scss.
   La seconde syntaxe plus ancienne est connue sous le nom de syntaxe en retrait (ou simplement «.sass»). Inspiré par la concision de Haml, il est destiné aux personnes qui préfèrent la concision à la similitude avec CSS. Au lieu de crochets et de points-virgules, il utilise l'indentation des lignes pour spécifier les blocs. Les fichiers dans la syntaxe en retrait utilisent l'extension .sass. »

   Modules CSS

   Un module CSS est un fichier CSS dans lequel tous les noms de classe et les noms d'animation sont étendus localement par défaut. Lorsque vous utilisez des modules CSS, chaque composant React est fourni avec son propre fichier CSS, qui est limité à ce fichier et à ce composant uniquement.

   La beauté des modules CSS se produit au moment de la création lorsque les noms de classe locaux qui peuvent être super simples sans conflit sont mappés directement sur ceux générés automatiquement et sont exportés en tant que littéral d'objet JS à utiliser dans React.

   Nous pouvons utiliser des modules CSS dans nos applications React en important le fichier directement dans le fichier de composant.

   Pour Par exemple, le code ci-dessous est un exemple d'utilisation d'un module CSS dans un composant React.

    // Box.css
    : local (.container) {
      marge: 40px;
      bordure: 5px rose pointillé;
    }
    :contenu local) {
      taille de police: 15px;
      alignement du texte: centre;
    } 

   : local (.className) est utilisé lorsque vous utilisez create-react-app passe-partout en raison des configurations de webpack.

   Lorsque vous utilisez webpack, vous pouvez ajouter le chargeur et également inclure le module dans votre webpack.config.js dans un autre pour faire fonctionner les modules CSS avec Webpack.

    test: /.css$/,
   loader: 'style! css-loader? modules & importLoaders = 1 & localIdentName = [name] __ [local] ___ [hash:base64:5]'
   } 

   Pour utiliser ce module CSS dans notre composant Box, nous devons importer le fichier de module directement dans notre composant Box.js et utiliser le className au lieu de style accessoire pour accéder au style comme ceci:

    importation de React à partir de 'react';
   importer des styles à partir de './Box.css';
   
   const Box = () => (
     
   
       
     Styling React Components 
     
   );
   
   exporter la boîte par défaut; 

   styles voici un objet qui contient les styles que nous avons créés dans Box.css . Cet objet contiendra les classes; conteneur et contenu qui correspond à leurs styles respectifs. Pour les utiliser, nous attribuons le className de l'élément à la classe appropriée que nous avons dans Box.css .

   Avantages de l'utilisation des modules CSS

   1. CSS modulaire et réutilisable,
   2. Plus de conflits de style,
   3. Dépendances explicites,
   4. Portée locale,
   5. Dépendances claires,
   6. Pas de duplication de code en cas de SSR,
   7. Pas de coûts supplémentaires dans la charge utile JS,
   8. Variables, partage de variables en CSS et exposition à JavaScript.

   Défauts d'utilisation des modules CSS

   1. Outils de construction supplémentaires (par exemple, webpack).
   2. Le mélange de modules CSS et de classes CSS globales est lourd.
   3. Quand un La référence est faite à un module CSS non défini, il se résout en non défini sans avertissement.
   4. L'utilisation de l'objet styles lors de la construction d'un className est obligatoire. [19659065] Autorise uniquement l'utilisation des noms de classe camelCase CSS .

   style d-components

   styled-components est une bibliothèque pour React et React Native qui vous permet d'utiliser des styles au niveau des composants dans votre application qui sont écrits avec un mélange de JavaScript et CSS. [19659009] Il a été créé avec la même méthode de fonctionnement que Modules CSS un moyen d'écrire du CSS limité à un seul composant, et qui n'est accessible à aucun autre élément de la page ou même d'un composant.

   styled-components permet aux développeurs React d'écrire du CSS simple dans les composants React sans avoir à se soucier de la confrontation des noms de classe.

   Par exemple, si nous devons implémenter le style dans notre Box.js en utilisant des composants stylisés, nous devons d'abord effectuer les étapes suivantes:

   • Premièrement, nous devons installer la bibliothèque styled-components en exécutant npm install styled-components --save .
   • Nous devons ensuite importer la bibliothèque de composants de style y dans notre composant en écrivant import styled from 'styled-components'; .
   • Maintenant, nous pouvons créer une variable en sélectionnant un élément HTML particulier où nous stockons nos clés de style.
   • Ensuite, nous utilisons le nom de notre variable que nous avons créée comme enveloppe autour de nos éléments JSX.

   Le code ci-dessous est une implémentation de toutes les étapes que nous avons mentionnées ci-dessus.

    import React de 'react';
   importation stylisée à partir de «composants stylisés»;
   
   const Box = styled.div`
     marge: 40px;
     bordure: 5px noir;
   "
   
   const Content = styled.p`
     taille de police: 16px;
     alignement du texte: centre;
   "
   
   const Box = () => (
     
         Styling React Components 
     
   );
   
   export default Box; 

   Dans le code ci-dessus, nous importons l'objet styled de styled-components qui utilise des littéraux de modèle balisés pour styliser votre composant. Nous créons ensuite une variable qui contiendrait notre style et agirait également comme un wrapper autour du contenu, c'est pourquoi nous avons les balises et dans ces variables, nous l'affectons à l'objet stylé ainsi que l'élément HTML que nous voulons styliser, puis les styles qui l'accompagnent pour l'élément HTML. Pour utiliser les variables que nous avons créées pour le style, tout ce que nous devons faire est d'envelopper notre JSX ou le contenu entre eux sous forme de balises.

   Avantages de l'utilisation de composants de style

   1. Cohérence
      composants de style vous permet de publier facilement un composant React dans NPM. Ces composants peuvent être personnalisés à l'aide d'accessoires et / ou d'extension via style (Composant) et sans conflit avec les sélecteurs CSS.
   2. Syntaxe Sass Out-Of-The-Box
      Vous pouvez obtenir la syntaxe de la marque SASS hors de la boîte sans avoir à installer ou configurer SASS ou tout outil de construction supplémentaire.
   3. Style dynamique
      Vous pouvez utiliser des accessoires pour changer dynamiquement les styles de n'importe quelle manière qui semble naturelle à toute personne à l'aise avec React. [19659034] Theming
      En utilisant l'API Context de React, styled-components propose un ThemeContext qui vous permet de passer directement un objet de thème, le rendant très accessible dans n'importe lequel de vos composants, et par défaut peut être interpolé en

   Inconvénients de l'utilisation de composants de style

   1. Curve d'apprentissage
      Les développeurs frontend qui sont déjà à l'aise avec l'écriture de CSS traditionnels devront apprendre une manière différente de styler qui est différente de la façon dont CS traditionnel S est écrit.
   2. L'intégration avec Legacy CSS peut être pénible.
      Si vous utilisez une bibliothèque d'interface utilisateur comme Material UI ou même CSS traditionnel, l'intégration de composants de style avec eux peut être source de confusion pour localiser et déboguer
   3. Performances
      styled-components convertit toutes les définitions de style de votre composant React en CSS au moment de la construction et les injecte tout dans les balises
dans la tête de votre index.html . Cela affecte les performances dans le sens où il augmente non seulement la taille de notre fichier HTML, ce qui peut avoir un impact sur le temps de chargement, mais il n'y a également aucun moyen de fragmenter le CSS de sortie non plus.

   JSS

   JSS est un outil de création pour CSS qui vous permet d'utiliser JavaScript pour décrire des styles de manière déclarative, sans conflit et réutilisable. Il peut être compilé dans le navigateur, côté serveur ou au moment de la construction dans Node. JSS est une nouvelle stratégie de style qui n'a pas été tellement adaptée. Il est indépendant du framework et se compose de plusieurs packages: le noyau, les plugins, les intégrations du framework et autres.

   JSS a des adaptateurs API tiers qui peuvent être utilisés pour écrire des styles similaires à JSS mais différemment, ces adaptateurs API tiers incluent: [19659084] Styled-JSS
   Il s'agit d'un adaptateur d'API à composants de style.

3. Glamour-JSS
   Glamour à saveur CSS avec JSS sous le capot.
4. Aphrodite-JSS
   Aphrodite comme API.

React-JSS

React-JSS utilise JSS avec React en utilisant la nouvelle API Hooks. JSS et le préréglage par défaut sont déjà intégrés à la bibliothèque. Selon les documents officiels de React-JSS voici les avantages de l'utilisation de React-JSS au lieu de la bibliothèque JSS de base dans vos composants React.

• Dynamic Theming
  Cela permet le contexte -mise à jour de la propagation des thèmes et de l'exécution.
• Extraction CSS critique
  Le seul CSS des composants rendus est extrait.
• Évaluation paresseuse
  Les feuilles de style sont créées lorsqu'un composant est monté et supprimées lorsqu'il est démonté. [19659065] La partie statique d'une feuille de style sera partagée entre tous les éléments.
• Les valeurs de fonction et les règles sont mises à jour automatiquement avec toutes les données que vous transmettez à useStyles (données) . Vous pouvez passer des accessoires, un état ou n'importe quoi à partir du contexte par exemple.

Le code ci-dessous est un exemple d'utilisation de React-JSS.

 importez React à partir de 'react'
importer {render} depuis 'react-dom'
importer injectSheet, {ThemeProvider} à partir de 'react-jss'
const styles = (theme) => ({
  wrapper: {
    rembourrage: 40,
    fond: theme.background,
    textAlign: 'centre'
  },
  Titre: {
    Police de caractère: {
      taille: 40,
      poids: 900,
    },
    couleur: accessoires => accessoires.couleur
  },
  lien: {
    couleur: theme.color,
    '&: hover': {
      opacité: 0,5
    }
  }
})
const Comp = ({classes}) => (
  

    
 Bonjour React-JSS! 
    
       Voir la documentation
    
  
)
const StyledComp = injectSheet (styles) (Comp)
thème const = {
  fond: '#aaa',
  couleur: '# 24292e'
}
const App = () => (
  
    
  
)
render (document.getElementById ("root"))

Dans le code ci-dessus, quelque peu similaire à l'utilisation de composants stylisés, nous importons injectSheet et ThemeProvider de la bibliothèque react-jss . Le ThemeProvider est un composant de haut niveau dans React, qui transmet l'objet thème dans l'arbre React en utilisant le contexte. Il contiendra le thème racine du composant. Alors que injectSheet est utilisé pour injecter la feuille de style que nous avons créée dans ce cas styles dans le composant principal.

 const Comp = ({classes}) => (
  

    
 Bonjour React-JSS! 
    
       Voir la documentation
    
  
) 

Le code ci-dessus est le composant React principal qui n'a pas été injecté avec l'objet styles que nous avons créé, il contient le code principal de notre composant React et il sera stylisé lorsque nous l'injecterons avec le objet styles que nous avons créé.

 const StyledComp = injectSheet (styles) (Comp) 

La ligne de code ci-dessus injecte les styles que nous avons créés dans le composant que nous avons créé pour utiliser la injectSheet () fonction.

 const theme = {
  fond: '#aaa',
  couleur: '# 24292e'
} 

Le code ci-dessus contient l'objet thème qui serait passé au HOC via le contexte et il agit comme le thème racine de notre composant.

 const App = () => (
  
    
  
) 

Dans cette partie du code, ce que nous faisons ici est d'utiliser le HOC, nous rendons notre composant dans lequel nous avons injecté la feuille stylisée que nous avons créée dans .

À la fin du rendu, voici ce qui sera affiché sur votre frère.

Avantages de JSS

1. Portée locale
   JSS prend en charge la portée locale, la portant au niveau supérieur en automatisant la portée, ce qui conduit à un haut niveau de prévisibilité .
2. Encapsulation
   L'encapsulation facilite la maintenance et élimine les erreurs, car vous pouvez modifier tous les codes et styles liés aux composants au même endroit, sans avoir à vous soucier de changer de façon inattendue d'autres parties de l'application.
3. Réutilisation
   ] Les composants sont réutilisables, vous n'avez donc qu'à les écrire une seule fois, vous pouvez ensuite les exécuter partout tout en conservant leur style.
4. Style dynamique
   Vous pouvez utiliser des accessoires pour modifier dynamiquement les styles de n'importe quelle manière qui vous semble naturel pour toute personne à l'aise avec React.

Lacunes de JSS

1. Learning Curve
   L'apprentissage de JSS peut être très délicat, en particulier les développeurs frontend qui sont déjà habitués à écrire des CSS traditionnels.
2. Extra L ayer of Complexity
   La mise en service d'une bibliothèque CSS-in-JS ajoute une couche supplémentaire à votre application React, qui peut parfois être inutile.
3. Lisibilité du code
   Les sélecteurs personnalisés ou générés automatiquement peuvent être très difficiles à lire en particulier lorsque vous utilisez les devtools de votre navigateur pour déboguer.

Conclusion

Chacune de ces options a ses avantages et ses inconvénients, et tout dépend de vos préférences personnelles / professionnelles et de la complexité de votre application. De plus, quelle que soit la stratégie de style que vous décidiez d'utiliser, elle reste essentiellement CSS. Vous pouvez écrire du CSS comme vous l'avez toujours fait, mais React et d'autres bibliothèques proposent des solutions qui peuvent également vous aider avec le style.

J'espère que vous avez apprécié ce didacticiel. Vous pouvez toujours en savoir plus sur Styling React Components dans les références ci-dessous. Si vous avez des questions, laissez un commentaire ci-dessous et je serai heureux de répondre à chacune d'entre elles.

Ressources

• JSS (docs)
• " Styling In React "Jacob Evans, V School
• " Composants stylisés "Flavio Copes
• " Quatre façons de styliser les composants React "Agata Krzywda
• " CSS-in-JS 101: Tout ce que vous devez savoir "stéréobooster, GitHub
• " Composants stylés et feuilles de style CSS "Luke Smetham, Stream.io
• " Meilleures pratiques pour le styling React Components », Chris Parker, Pluralsight

(ks, ra, yk, il)