Les bibliothèques CSS-in-JS, comme les composants stylés, sont devenues plus populaires ces dernières années. Ils encapsulent le CSS jusqu'au niveau du composant et vous permettent d'utiliser JavaScript pour définir des styles réutilisables.
En utilisant des composants stylés, vous pouvez conserver l'architecture pilotée par les composants que React renforce déjà. Mais la bibliothèque a aussi des inconvénients.
Fonctionnement des composants stylés
La composants de style La bibliothèque CSS-in-JS vous permet d'écrire du CSS dans vos fichiers de composants. Sa syntaxe est la même que CSS, il est donc assez facile à comprendre. C'est un terrain d'entente parfait pour les développeurs JavaScript qui ont tendance à rester à l'écart du CSS pur.
Pour voir comment cela fonctionne, considérez le composant Title suivant qui affiche un élément h1.
constante Titre = styled.h1`
taille de police: 1.5em;
aligner le texte: centrer ;
La couleur rouge;
`;
Vous pouvez utiliser ce composant comme n'importe quel autre composant React.
constante Accueil = () => {
revenir (
<Titre>Un titre de composant stylé</Title>
)
}
Il est également très puissant car il facilite le travail avec les accessoires et l'état.
Par exemple, la couleur et l'arrière-plan de ce composant dépendent des accessoires.
importer stylé de "composants stylés" ;constante Bouton = style.bouton`
rembourrage: 0.8rem 1.6rem;
couleur d'arrière-plan: ${(props) => (accessoires.primaire? "violet": "blanche")};
frontière: 1px solide #00000;
couleur: ${(accessoires) => (accessoires.primaire? "blanche": "violet")};
`;
exporterdéfautfonctionMaison() {
revenir <Bouton principal>Primaire</Button>
}
Avec les composants stylés, vous n'avez pas besoin de transmettre manuellement les accessoires au CSS. Il est automatiquement disponible, simplifiant les styles d'écriture qui dépendent des données du composant.
Avantages de l'utilisation de composants stylés
Voici quelques avantages de l'utilisation de la bibliothèque de composants de style.
Il résout les problèmes de spécificité CSS
Les composants stylisés éliminent les problèmes de spécificité car ils encapsulent le CSS dans un composant. Cela signifie que vous n'avez pas à vous soucier des conflits de noms de classe ou de la transformation de votre interface utilisateur en désordre en raison de conflits de noms de classe.
Vous permet d'écrire des composants CSS à l'intérieur
Comme le montre l'exemple de composant de bouton, les composants de style vous permettent de combiner CSS et JS dans le même fichier. Ainsi, vous n'avez pas besoin de créer un fichier CSS séparé ou de passer d'un fichier à l'autre.
C'est un énorme avantage lors de la création de kits d'interface utilisateur, car vous stockez toutes les fonctionnalités des composants dans un seul fichier.
Autre que cela, écrire du CSS à l'intérieur des composants. Cela facilite le partage des accessoires et des états avec les styles.
Permet la vérification de type
Avec les composants stylés, vous pouvez vérifier le type des accessoires et des valeurs utilisés dans vos styles. Par exemple, vous pouvez réécrire le composant de bouton ci-dessus en utilisant TypeScript.
interfaceaccessoires{
primaire: booléen
}
const Button = styled.button<accessoires>`
rembourrage: 0.8rem 1.6rem;
couleur d'arrière-plan: ${(props) => (accessoires.primaire? "violet": "blanche")};
frontière: 1px solide #00000;
couleur: ${(accessoires) => (accessoires.primaire? "blanche": "violet")};
`;
Utilisation de TypeScript dans le composant signifie vérifier les erreurs de type pendant que vous codez et réduire le temps de débogage.
Prend en charge la thématisation prête à l'emploi
Ajouter un thème sombre ou tout autre thème à votre application peut être difficile et prendre du temps. Cependant, les composants stylisés simplifient le processus. Vous pouvez ajouter des thèmes à votre application en exportant un
constante Bouton = styled.main`
couleur d'arrière-plan: ${props => props.theme.light.background} ;
couleur: ${props => props.theme.light.fontColor} ;
`
<ThemeProvider thème={thème}>
<Bouton>
Bouton lumière
</Button>
</ThemeProvider>
Le composant ThemeProvider transmet les thèmes à tous les composants stylisés qu'il encapsule. Ces composants peuvent ensuite utiliser les valeurs de thème dans leurs styles. Dans cet exemple, le bouton utilise les valeurs de thème pour les couleurs d'arrière-plan et de police.
Inconvénients de l'utilisation de composants stylés
Bien que l'utilisation de la bibliothèque de composants de style présente de nombreux avantages, elle présente également des inconvénients.
Ce n'est pas indépendant du cadre
Écrire du CSS dans JS signifie qu'il sera difficile de séparer les deux à l'avenir, ce qui est terrible pour la maintenabilité. Par exemple, si jamais vous décidez de changer de Cadre JavaScript, vous devrez réécrire la majeure partie de votre base de code.
Cela prend du temps et coûte cher. Utilisant Modules CSS ou une bibliothèque indépendante du cadre comme emotion est plus pérenne.
Il peut être difficile à lire
La différenciation entre les composants stylisés et React peut être difficile, en particulier en dehors d'un système de conception atomique. Considérez cet exemple :
<Principal>
<Navigation>
<Élément de liste>
<Texte du lien>Adopter un animal de compagnie</LinkText>
</ListItem>
<Élément de liste>
<Texte du lien>Faire un don</LinkText>
</ListItem>
</Nav>
<Entête>Adoptez, don't boutique!</Header>
<SecondaryBtn btnText="Faire un don" />
</Main>
La seule façon de savoir quel composant contient la logique métier est de vérifier s'il a des props. De plus, même si les noms des composants dans cet exemple sont descriptifs, il est toujours difficile de les visualiser.
Par exemple, le composant Header peut être un titre, mais à moins que vous ne vérifiiez les styles, vous ne saurez peut-être jamais s'il s'agit d'un h1, h2 ou h3.
Certains développeurs résolvent ce problème en utilisant uniquement le composant stylé comme wrapper et en utilisant les balises HTML sémantiques pour les éléments qu'il contient.
Dans cet exemple, le composant d'en-tête peut utiliser une balise h1.
<h1>Adoptez, don't boutique!</h1>
Vous pouvez aller plus loin en définissant les composants stylés dans un autre fichier (par exemple styled.js), que vous pourrez ensuite importer dans un composant React.
importer * comme Stylisé de './style'
// utilise styled.components
<stylé. Principal>
// code
</styled.Main>
Cela vous donne une vue claire des composants stylisés et des composants React.
Les composants stylisés sont compilés au moment de l'exécution
Pour les applications qui utilisent des composants stylés, le navigateur télécharge le CSS et l'analyse à l'aide de JavaScript avant de les injecter dans la page. Cela entraîne des problèmes de performances car l'utilisateur doit télécharger beaucoup de JavaScript lors du chargement initial.
Le CSS statique est beaucoup plus rapide. Il n'a pas besoin d'être traité avant que le navigateur ne l'utilise pour styliser les pages. Cependant, la bibliothèque de composants de style s'améliore à chaque version. Si vous pouvez vous permettre des performances réduites, allez-y et utilisez-les.
Quand utiliser des composants stylés
Certains développeurs aiment écrire du CSS dans des fichiers JS, tandis que d'autres préfèrent avoir des fichiers CSS séparés. La façon dont vous choisissez d'écrire du CSS devrait finalement dépendre du projet lui-même et de ce que vous ou votre équipe aimez. Les composants stylisés sont un bon choix pour créer une bibliothèque d'interface utilisateur car tout peut être dans un seul fichier et être facilement exporté et réutilisé.
Si vous préférez écrire du CSS pur, utilisez des modules CSS. Vous pouvez avoir des fichiers CSS distincts, et les styles sont définis localement par défaut. Quel que soit votre choix, il est essentiel d'avoir de solides connaissances en CSS.