React styled-components et Next.js
Styled-components, comme son nom l’indique, fournit directement des composants react avec des styles associés. Dans un fichier javascript, le css est lié à un composant créé grâce à la fonction fournie par styled-components et aux littéraux de gabarit (les backticks « ). C’est ce composant qui est ensuite exporté pour être affiché.
Différences et avantages
De mon point de vue, le principal avantage, de taille, est que les classes css ne sont plus nécessaires. Oui, il n’y a plus de classes css.
Et c’est assez simple et intuitif à comprendre, comme on utilise l’équivalent d’un composant stylisé directement. Ainsi, les propriétés css varient en fonction des propriétés passées au composant .
A l’utilisation, les styled-components sont extrémement pratiques et rapides à prendre en main, je ne m’en suis pas rendu compte tout de suite mais on gagne un temps incroyable à ne pas chercher parmis les différentes classes.
Si on veut modifier le style d’un élément affiché, un coup d’oeil dans la console pour afficher le code html, le nom du composant est préfixé dans la classe de l’élément inspecté, on va voir le code du composant correspondant, fin.
Pour les inconvénients, j’en vois surtout un, l’auto-complétion avec Emmet n’est pas prise en charge.
Exemple d’utilisation « dumb component »
La création du composant :
L’utilisation pour le render :
Exemple gérer un « smart-component »
Il est tout à fait possible de créer un composant complexe et/ou avec une logique et ensuite de lui donner un style, dans ce cas c’est le composant stylisé qui est utilisé pour le render.
Le composant « de base » :
Les composants stylisés :
L’utilisation pour le render
Gérer des thèmes quand les pages sont pré-rendues avec Next.js
Lien : https://styled-components.com/docs/advanced#server-side-rendering
La problèmatique rencontrée ici est qu’un thème s’applique à l’ensemble des pages d’un site et que Next.js fait un pré-rendering côté serveur de ces pages.
Avec react seul, on modifierait une prop du state ou on changerait de context en cliquant sur un bouton. Mais on aurait pas chargé de contenu html donc pas de SEO… dommage.
Next.js fabrique toutes les pages possibles compte-tenu des propriétés fournies, donc y compris la prop qui définie le thème… mais s’il est choisi côté serveur, seuls les styles correspondant au thème au moment du build sont chargés, alors comment le modifier côté client ?
Bref, les différents styles et valeurs de la prop thème doivent être fournies au moment du built et Next.js fera un pré-rendering de toutes les pages dans chaque thème fourni.
Avec Next + styled-components les étapes sont :
- – Utiliser le ThemeProvider fourni par styled-components,
<li>
– Au niveau de chaque page, fournir les différentes valeurs de la prop «
theme » qui sera fournie pour choisir le thème,
</li>
<li>
– Finalement, paramétrer Next.js pour inclure les styles de
styled-component au moment du build,
</li>
1/ Utiliser le « theme provider » de styled-component
On fournit ainsi le style correspondant à une prop « theme » à chaque page
L’exemple fourni dans la doc est très bien :
https://styled-components.com/docs/advanced#theming</a
Sur la base de cet exemple, j’ai choisi de m’organiser en créant :
– un composant Layout.js qui contient les composants communs à toutes les pages,
– un composant Theme.js qui fourni le ThemeProvider (le thème choisi) + GlobalStyles.js (les styles communs dans toute l’application) à Layout.js,
2/ Prévoir la prop qui définie le thème dans les méthodes getStaticProps() et getStaticPath() des pages Next.js
Il s’agit ici de l’utilisation basic de Next.js pour le pré-rendering d’une page.
La valeur du thème à appliquer est définie par la valeur de l’url de la page affichée (slug).
Note les themes ‘dark’ et ‘light’ sont de simples objets javascript ayant la forme : { cssPropName: `value`, }
3/ paramétrer Next.js pour inclure les styles de styled-component au moment du build,
Fournir la prop du thème et les différentes url ne suffit pas à charger tous les styles, pour cela il faut modifier le ficher _document.js fourni par next/document, (lien : https://github.com/vercel/next.js/tree/master/examples/with-styled-components),
Beaucoup d’autres possibilités sont détaillées dans la doc, à titre personnel je trouve très pratique d’avoir directement un composant et de pouvoir modifier son style aussi facilement. Avoir la possibilité d’utiliser Emmet classerait les styled-components en tête de mes préférences pour gérer les styles.