Fermer

avril 10, 2019

Un aperçu des bibliothèques CSS-in-JS populaires pour React


Nous pensions que React était fou quand il est venu avec HTML-in-JS (JSX), mais aujourd'hui, nous sommes heureux que la révolution ait eu lieu. Cela nous a aidé à construire de meilleurs composants. Pourquoi ne pas le faire aussi avec CSS? En fait, vous pouvez. Faites connaissance avec CSS-in-JS.

Depuis l’émergence de React, un débat sérieux a eu lieu sur l’écriture de CSS en JavaScript. Certains étaient fermement opposés à cette idée alors que d'autres étaient assez curieux pour l'essayer. Mais lentement, avec le temps, l’adoption des bibliothèques CSS-in-JS a considérablement augmenté et de nouvelles bibliothèques apparaissent à l’heure.

Nous allons examiner aujourd’hui certaines des bibliothèques populaires CSS-in-JS que sont devenus un pilier dans nos applications et projets. Nous énumérerons certaines d'entre elles sans ordre particulier, avec des exemples et un aperçu de leur mise en œuvre.

Glamour

Certaines des bibliothèques énumérées ici ont été construites autour de Glamour ce qui signifie qu'elles sont Glamour a raison dans son implémentation CSS-in-JS. Glamour permet la composition, ce qui signifie que vous pouvez facilement écraser les règles CSS en diffusant de nouvelles règles dans le nom de classe d’un composant ou dans ses accessoires. La capacité d'écrire et de combiner les règles CSS fait de Glamour un choix assez intéressant.

Créons un composant de bouton utilisant la règle de Glamor combinant et diffusant des fonctionnalités:

 const  rule  =   css  ( {
Rembourrage :   '1rem 4rem' ; 
marge :   '10px 20px' ; 
frontière  -  rayon :   '5 pixels' ; 
background :   'gradient linéaire (90deg, # D26AC2, # 46C9E5)' ; 
couleur :   '# 1D2029' ;   
} )   
  
 const  primaryRule  =   css  [ ]
couleur :   '# D26AC2' 
background :   'red'   
} )   
  
 // Comme attributs de données 
 < button  { ...  règle }   { ...  règle primaire } > 
Bouton primaire
 < /  button >   
  
 // En tant que classes 
 < button className  =  { ` $  règle }   $ { règle primaire }  » } > 
Bouton primaire
 < /  button >

Glamorous

En tant que développeur JavaScript et sceptique pour CSS-in-JS, vous apprécierez la syntaxe adoptée par Glamorous . Il fournit la syntaxe JavaScript familière pour le style des composants et la création de thèmes dynamiques. En permettant aux utilisateurs de fournir des accessoires dynamiques pour le style, il a un avantage sur certaines des autres bibliothèques de cette liste. De plus, Glamorous a été construit sur la bibliothèque Glamour, une populaire bibliothèque JavaScript CSS-in-JS.

Le projet n'est actuellement pas activement maintenu. Vous devez donc bien réfléchir avant de choisir cette option.

Il possède une API simple et facile à comprendre:

 const  Heading  =  glamour .  button  ( {
fontSize :   '14px' 
marginTop :   10 
couleur :   '# CC3A4B' 
rembourrage :   '1rem 4rem' 
marge :   '10px 20px'   
	 'border-radius' :   '5px' 
background :   'gradient linéaire (90deg, # D26AC2, # 46C9E5)' 
couleur :   '# 1D2029'   
} ) ;

Emotion

Utilisation de littéraux et de styles d'objet, L'émotion permet vous pour style rapidement les applications. Il fournit des cartes source et des étiquettes, ainsi que deux méthodes distinctes d’applications de style. Si vous n'êtes pas familiarisé avec les littéraux de modèle et que vous préférez utiliser les styles d'objet, Emotion prend en charge les deux.

Ils ont utilisé ce qui était formidable pour les autres bibliothèques CSS-in-JS et les ont combinées pour en faire une excellente bibliothèque. Ils fournissent un soutien pour les accessoires et la composition. Il est performant et fournit une lourde mise en cache en production, selon leur documentation. Emotion possède une bibliothèque de thèmes et prend en charge le rendu côté serveur.

Nous pouvons styler un composant bouton en utilisant des littéraux de modèle et des styles d'objet:

 // modèles de littéraux 
 const  Button  =  .  a  »
rembourrage: 1rem 4rem;
marge: 10px 20px;
border-radius: 5px;
background:  $ { ( props )   => 
accessoires .  contexte  &&   'gradient linéaire (90deg, # D26AC2, # 46C9E5)' } ;
color:  $ { ( props )   =>   ( props .  primaire ?   ' ' # 1D2029 ' :  ' # D26AC2 ') } ;
&: vol stationnaire {
opacité: 0,95;
}
` ;

Utilisation des styles d'objet:

 // Styles d'objet 
 const  Button  =  intitulé .  a   props  =>   ( {
rembourrage :   '1rem 4rem' 
marge :   '10px 20px' 
frontière  -  rayon :   '5 pixels' 
background :  accessoires .  background  &&   'gradient linéaire (90deg, n ° D26AC2, n ° 46C9E5)' 
couleur :  accessoires .  primaire ?   '# 1D2029'  :   '# D26AC2'   
}  ) ) ;

Styles de composants

Styles de composants est (selon les stars de Github) la bibliothèque CSS-in-JS la plus populaire dans le monde. Il utilise des littéraux de modèles étiquetés pour styler vos composants. Il supprime le mappage entre les composants et les styles, facilitant la création de styles de bas niveau. Styled-composants génère des noms de classe uniques pour tous vos composants, de sorte que vous n’ayez plus jamais à vous soucier des noms de classe en conflit.

Styled-components possède une API très riche et intuitive ainsi qu’une communauté nombreuse. Il prend pleinement en charge le rendu côté serveur, React Native, les thèmes, les requêtes de supports et bien plus encore.

La création d'un composant de bouton à l'aide de composants stylisés ressemblerait à ceci:

 const  Button  =  stylisé .  bouton 
rembourrage: 1rem 4rem;
marge: 10px 30px;
color:  $ { ( props )   =>  props .  color } ;
background:  $ { ( props )   =>  props .  background } ;
bordure: aucune;
border-radius: 4px;
` ;

Radium

Radium est l'une des bibliothèques originales de CSS-in-JS. Il vise à atteindre les fonctionnalités CSS telles que les requêtes multimédia, les sélecteurs, les sélecteurs de programme et les modificateurs sans écrire de code CSS. Il privilégie un style de développement expressif et optimisé (élimination de code mort). Parmi les autres fonctionnalités prises en charge par Radium, on citera:

  • Préfixe automatique du vendeur
  • Aide à l'animation des images clés
  • Classe ES6 et Prise en charge de CreatClass
  • Requêtes de média

La création d'un composant de bouton à l'aide de Radium a sensation quelque peu familière:

 import  Radium  de   'radium' ; 
  import  Réagir  de   'react' ; ; [19659149] import  couleur  de   'couleur' ​​; 
 classe   Bouton   s'étend   Réagir .  Composant   {
  ] static  propTypes  =   {
 kind :  PropTypes .  oneOf  (  'primaire'   'warning' ] ) [19659009].  est Requis
 } ; 
  render  ()   {
  // Radium étend l'attribut de style pour accepter un tableau. Il fusionnera 
  // les styles dans l'ordre. Nous utilisons cette fonctionnalité ici pour appliquer les styles primaires 
  // ou warning, en fonction de la valeur du prop `kind`. Depuis son 
  // tout en JavaScript, vous pouvez utiliser la logique de votre choix pour décider quels styles 
  // sont appliqués (accessoires, état, contexte, etc.). 
  return   (
  < bouton
 style  =  { [
 styles .  base 
 styles  [ ceci .  accessoires .  type ] 
 ] } > 
  { ceci [19659009].  accessoires .  enfants } 
  < /  bouton > 
 ) ; 
 ] [
 } 
  } 
   
 Button  =   Radium  ( Button ) ; 
 // Vous pouvez créer vos objets de style de manière dynamique ou les partager pour 
  // toutes les instances du composant. 
  var  styles  =   {
 base :   {
 couleur :   '# fff' 
 // L'ajout d'un état interactif n'a jamais été aussi simple! Ajoutez une clé spéciale à votre objet de style 
  // (: survol,: focus,: actif ou @media) avec les règles supplémentaires. 
  ': vol stationnaire' :   {
 background :   couleur  ( '# 0074d9' ) .  alléger  ( 0.2 ) . . ] hexString  () 
 } 
 } 
   
 primaire :   {
 background :   '# 0074D9' 
 } 
avertissement :   {
 background :   '# FF4136' 
 } 
 } ; 
 // Bouton Primary 
  < Bouton primaire >  primaire
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link