Composants stylisés

Les composants stylisés sont l'une des nouvelles façons d'utiliser CSS dans le JavaScript moderne. C'est censé être le successeur des modules CSS, un moyen d'écrire du CSS qui est limité à un seul composant, et ne fuit pas vers un autre élément de la page

Une histoire brève

Il était une fois, le Web était vraiment simple et le CSS n'existait même pas. Nous avons mis en page des pages en utilisantles tableset cadres. Bon temps.

PuisCSSest venu à la vie, et après un certain temps, il est devenu clair que les frameworks pouvaient grandement aider en particulier dans la construction de grilles et de mises en page, Bootstrap et Foundation jouant un grand rôle dans ce domaine.

Les préprocesseurs commeTOUPETet d'autres ont beaucoup aidé à ralentir l'adoption de cadres et à mieux organiser le code, des conventions commeBEMetSMACSSs'est développée, notamment au sein des équipes.

Les conventions ne sont pas une solution à tout, et elles sont complexes à retenir, donc ces dernières années, avec l'adoption croissante deJavaScriptet de créer des processus dans chaque projet frontal, CSS a trouvé son chemin dans JavaScript (CSS-en-JS).

De nouveaux outils ont exploré de nouvelles façons de faire CSS-in-JS et quelques-uns ont réussi avec une popularité croissante:

  • Style de réaction
  • jsxstyle
  • Radium

et plus.

Présentation des composants stylisés

L'un des outils les plus populaires estComposants stylisés.

Il est censé être le successeur deModules CSS, un moyen d'écrire du CSS qui est limité à un seul composant et qui ne fuit pas vers un autre élément de la page.

(plus sur les modules CSSicietici)

Les composants stylisés vous permettent d'écrire du CSS brut dans vos composants sans vous soucier des collisions de noms de classe.

Installation

Installer des composants stylisés en utilisantnpmoufil:

npm install styled-components
yarn add styled-components

C'est tout! Il ne vous reste plus qu'à ajouter cette importation:

import styled from 'styled-components'

Votre premier composant stylisé

Avec lestyledobjet importé, vous pouvez maintenant commencer à créer des composants stylisés. Voici le premier:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

Buttonest maintenant unRéagirComposant dans toute sa grandeur.

Nous l'avons créé en utilisant une fonction de l'objet stylé, appeléebuttondans ce cas, et en passant certaines propriétés CSS dans unmodèle littéral.

Maintenant, ce composant peut être rendu dans notre conteneur en utilisant la syntaxe normale de React:

render(<Button />)

Les composants stylisés offrent d'autres fonctions que vous pouvez utiliser pour créer d'autres composants, non seulementbutton, aimersection,h1,inputet plein d'autres.

La syntaxe utilisée, avec le backtick, peut être bizarre au début, mais elle s'appelleModèles balisés, c'est du JavaScript simple et c'est un moyen de passer un argument à la fonction.

Utilisation d'accessoires pour personnaliser les composants

Lorsque vous passez des accessoires à un composant stylisé, il les transmettra auDOMnœud monté.

Par exemple, voici comment nous passons leplaceholderettypeaccessoires à uninputcomposant:

const Input = styled.input`
  //...
`

render( <div> <Input placeholder="…" type=“text” /> </div> )

Cela fera ce que vous pensez, en insérant ces accessoires en tant qu'attributs HTML.

Des accessoires au lieu d'être transmis aveuglément auDOMpeut également être utilisé pour personnaliser un composant en fonction de la valeur de prop. Voici un exemple:

const Button = styled.button`
  background: ${props => (props.primary ? 'black' : 'white')};
  color: ${props => (props.primary ? 'white' : 'black')};
`

render( <div> <Button>A normal button</Button> <Button>A normal button</Button> <Button primary>The primary button</Button> </div> )

Réglage duprimaryprop change la couleur du bouton.

Extension d'un composant stylisé existant

Si vous avez un composant et que vous souhaitez en créer un similaire, avec un style légèrement différent, vous pouvez utiliserextend:

const Button = styled.button`
  color: black;
  //...
`

const WhiteButton = Button.extend </span><span style="color:#e6db74"> color: white; </span><span style="color:#e6db74">

render( <div> <Button>A black button, like all buttons</Button> <WhiteButton>A white button</WhiteButton> </div> )

C'est du CSS régulier

Dans Styled Components, vous pouvez utiliser le CSS que vous connaissez et aimez déjà. C'est du CSS simple. Ce n'est pas du pseudo CSS ni du CSS en ligne avec ses limitations.

Vous pouvez utiliser des requêtes multimédias,nidificationet tout ce dont vous pourriez avoir besoin.

Voici un exemple de requête multimédia:

const Button = styled.button`
  color: green;
  @media screen and (max-width: 800px) {
    color: black;
  }
`

Utilisation des préfixes de fournisseur

Les composants stylisés ajoutent automatiquement tous les préfixes de fournisseur nécessaires, vous n'avez donc pas à vous soucier de ce problème.

Conclusion

Voilà pour cette introduction de Styled Components! Ces concepts vous aideront à comprendre le concept et à vous familiariser avec cette façon d'utiliser CSS dans JavaScript.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: