Écrire du CSS à l'épreuve du temps est difficile. Des noms de classe en conflit, des problèmes de spécificité, etc., apparaissent lorsque vous devez écrire et gérer des milliers de lignes de code CSS. Styled Components a été créé

Styled Components facilite l'écriture de vos CSS dans JS et vous assure qu'il n'y a pas de noms de classe en conflit ni de problèmes de spécificité comportant de nombreux autres avantages. L'écriture de CSS est un plaisir.

Dans ce didacticiel, nous allons explorer ce qu'est CSS dans JS, les avantages et inconvénients de styled-components et enfin, nous allons repenser Unsplash à l'aide de Styled Components. . Après avoir terminé ce didacticiel, vous devriez être en mesure de vous familiariser rapidement avec les composants stylisés.

Remarque: Styled Components a été spécialement conçu pour React. Vous devez donc utiliser React pour utiliser ce dernier. 19659005] Conditions préalables

Pour ce didacticiel, vous devez posséder des connaissances de base en React .

Tout au long de ce didacticiel, nous utiliserons le fil . . Si vous n'avez pas le fil déjà installé, installez-le à partir de ici .

Pour vous assurer que nous sommes sur la même page, il s'agit des versions utilisées dans ce tutoriel :

• Noeud 12.6.0
• npx 6.4.1
• fil 1.17.3

Evolution du CSS

Avant la création de CSS-in-JS, le moyen le plus courant de styliser des applications Web était de: écrivez CSS dans un fichier séparé et associez-le au HTML.

Mais cela a posé problème dans les grandes équipes. Tout le monde a sa propre façon d'écrire CSS. Cela posait des problèmes de spécificité et poussait tout le monde à utiliser ! Important .

Vint ensuite Sass. Sass est une extension de CSS qui nous permet d’utiliser des éléments tels que des variables, des règles imbriquées, des importations en ligne, etc. Cela aide également à garder les choses organisées et nous permet de créer des feuilles de style plus rapidement.

Même si Sass peut être perçu comme une amélioration par rapport à CSS, il fait sans doute plus de mal que de bien sans la mise en place de certains systèmes.

BEM est arrivé. BEM est une méthodologie qui nous permet de réduire les problèmes de spécificité en nous faisant écrire des noms de classe uniques. BEM résout le problème de spécificité, mais rend le code HTML plus détaillé. Les noms de classe peuvent devenir inutilement longs, et il est difficile de créer des noms de classe uniques lorsque vous avez une énorme application Web.

Après cela, les modules CSS sont nés. Les modules CSS ont résolu ce que ni Sass ni BEM ne pouvaient résoudre – le problème des noms de classe uniques – en utilisant des outils plutôt qu'en s'appuyant sur le nom donné par un développeur, ce qui a résolu les problèmes de spécificité. Les modules CSS ont acquis une grande popularité dans l'écosystème React, ouvrant la voie à des projets comme glamour .

Le seul problème avec toutes ces nouvelles solutions était que les développeurs étaient amenés à apprendre de nouvelles syntaxes. Et si nous pouvions écrire CSS exactement comment nous l'écrivons dans un fichier .css mais en JS? Et c'est ainsi que styled-composant a été créé.

Styled Components utilise Template Literals une fonction ES6. Les littéraux de modèle sont des chaînes de caractères permettant des expressions incorporées. Ils permettent d'utiliser des chaînes multilignes et des fonctions d'interpolation de chaînes.

Le principal argument de vente de Styled Components est qu'il nous permet d'écrire du code CSS exact dans JS.

Styled Components présente de nombreux avantages. Vous trouverez ci-dessous certains des avantages et inconvénients des composants stylés.

Pour

L'utilisation de composants stylés présente de nombreux avantages.

1. Injecter des CSS critiques dans le DOM

   Les composants stylés n'injectent que des CSS critiques. page. Cela signifie que les utilisateurs ne téléchargent que les feuilles de style CSS nécessaires pour cette page et rien d'autre. Cela charge la page Web plus rapidement.

2. Plus petit groupe CSS par page

   Comme il n'injecte que les styles utilisés dans les composants de la page, la taille du groupe est considérablement réduite. Vous ne chargez que le CSS dont vous avez besoin, au lieu de feuilles de style excessives, de normalisateurs, de réactivité, etc.

3. Préfixe automatique du vendeur

   Styled Components vous permet d'écrire votre CSS et ses préfixes de vendeur automatiquement, conformément au dernier standard.

4. Suppression du code CSS inutilisé

   Avec les composants stylés, il est plus facile de supprimer le code CSS inutilisé ou inutilisé, car les styles sont colocalisés avec le composant. Cela a également un impact sur la réduction de la taille du paquet.

5. Theming is easy

   Les composants stylisés facilitent vraiment le thème d'une application React. Vous pouvez même avoir plusieurs thèmes dans vos applications tout en les maintenant facilement.

6. Réduit le nombre de requêtes HTTP

   En l'absence de fichiers CSS pour les réinitialisations, les normalisateurs et la réactivité, le nombre de requêtes HTTP est considérablement réduit.

7. Noms de classe uniques

   Styled Components génère des noms de classe uniques chaque fois qu'une étape de construction a lieu. Cela permet d'éviter les collisions de nommage ou les problèmes de spécificité. Plus besoin d'avoir des conflits mondiaux et d'être obligés de les résoudre avec les balises ! Important .

8. La maintenance est facile

   Styled Components vous permet de co-localiser des styles avec le composant. Cela permet un entretien sans douleur. Vous savez exactement quel style affecte votre composant, contrairement à un gros fichier CSS.

Contre

Bien sûr, rien n’est parfait. Examinons quelques inconvénients associés aux composants stylisés.

1. Impossible de mettre en cache les feuilles de style

   En règle générale, un navigateur Web met en cache les fichiers .css lorsqu'un utilisateur visite un site Web lors de sa prochaine visite. t devez télécharger le même .css à nouveau. Mais avec styled-components les styles sont chargés dans le DOM à l'aide de la balise

Réagir spécifiquement

Les composants stylisés ont été conçus avec React en tête. Donc, c’est la réaction spécifique. Si vous utilisez un autre framework, vous ne pouvez pas utiliser Styled Components.

Toutefois, il existe une alternative très similaire à styled-composants connue sous le nom de emotion qui est agnostique.

Mise en pratique

Maintenant que nous connaissons les avantages et les inconvénients de Styled Components, commençons à l'utiliser.

Continuez à échafauder un nouveau projet React utilisant create-react-app . Pour l'échafauder, nous allons utiliser npx qui vous permet de télécharger et d'exécuter un paquet temporairement sans polluer l'espace de noms global.

Saisissez ce qui suit dans le terminal:

 $ npx create-react -app unsplash-styled-components

Ensuite, allez dans le répertoire unsplash-styled-components et installez les paquetages suivants nécessaires à la réalisation de ce tutoriel, à savoir de style-components et react-medium- image-zoom :

 $ cd unsplash-styled-components
$ fil ajouter des composants stylés react-medium-image-zoom

Le package de composants stylisés nous permet d'écrire du code CSS réel dans JS, tandis que le package réagit-moyen-image-zoom nous permet de zoomer sur une image . style .

Maintenant, une fois l’installation terminée, supprimez les fichiers inutiles tels que App.css App.test.js index.css et logo.svg du répertoire src / .

Allez-y et supprimez import './index.css'; intimé19459009] de index.js car ce n'est plus nécessaire

Remplacez le contenu de App.js par ce qui suit:

 import Réaction de 'react'

const App = () => 
 Hello React 

exportation par défaut

Essayez maintenant de lancer le serveur de développement en tapant le début du fil dans le terminal.

Vous devriez voir Hello React affiché à l'écran de la manière suivante:

Styled Components utilise des libellés de modèle étiquetés pour styliser votre composant.

Supposons que vous souhaitiez styliser le h1 en tant que texte blanc sur fond rose par en utilisant des composants stylés. Voici comment procéder:

 import Réagissez à partir de "réagit"
importer des styles à partir de 'styled-components'

const Header = styled.h1`
    couleur de fond: rose;
    Couleur blanche;
`

const App = () => 
 Bonjour Réagissez 

exportation par défaut

Cela devrait maintenant ressembler à ceci:

Nous venons de créer notre premier composant stylé Header . Le composant Header est attribué à styled.h1 . L'exportation par défaut portant le nom provenant de de composants stylés comporte des primitives HTML de base telles que div span h1 . h2 etc.

À l'intérieur de styled.h1 nous écrivons le code CSS réel. Notez que nous écrivons des CSS plutôt que de créer des objets de style.

De plus, le composant Header est remplacé dans le navigateur par une balise h1 et un nom de classe unique. Une balise de style de style est insérée dans le DOM avec le même nom de classe unique. Voici les bases du fonctionnement réel des composants stylés.

Nos styles se trouvent dans le même fichier que notre composant. Cela signifie que notre composant est co-localisé avec les styles. Ainsi, il est plus facile de supprimer les styles associés à un composant particulier, éliminant ainsi le code mort.

Traditionnellement en CSS, il est difficile de raisonner, car nous devons trouver le nom de classe d'un élément particulier ou . id ou sélecteur spécifique puis supprimez-les un à un. C’est facile dans un petit projet, mais cela devient difficile à mesure que sa complexité augmente. Avec les composants stylés, quelle que soit la complexité du projet, il est plus facile d'ajouter, de modifier et de supprimer des styles, car ils sont co-localisés avec le composant.

Theming dans les composants stylés

Ajoutons-les à notre projet. ] Créez un dossier utils / dans le répertoire src / . Créez ensuite un fichier themes.js dans le dossier utils / . Collez ce qui suit dans themes.js :

 export const themes = {
  commun: {
    famille de polices:
      "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans serif",
  },
  lumière: {
    type: 'lumière',
    bgColor: 'blanc',
    couleur: '# 3E4C59',
    searchBgColor: '# E4E7EB',
    boxShadow: '0.8rem 0.8rem 1.5rem grey',
    catégorieCouleur: '# 999',
    categoryHoverColor: '# 333',
  },
  foncé: {
    type: 'sombre',
    bgColor: '# 1F2933',
    couleur: '# E4E7EB',
    searchBgColor: '# E4E7EB',
    boxShadow: '0.4rem 0.4rem 1.5rem # 111111',
    categoryColor: '# CBD2D9',
    categoryHoverColor: '# 9AA5B1',
  },
}

Le fichier themes.js contient un objet nommé themes avec trois propriétés: common light et dark [Lapropriété commune contient des styles communs à plusieurs thèmes, la propriété light contient des styles pour le thème light et la propriété dark contient des styles pour the dark theme.

Maintenant, changez App.js comme suit:

 import React, {useState} à partir de 'react'
importer styled, {ThemeProvider} à partir de 'styled-components'
importer {themes} de './utils/themes'

const lightTheme = () => ({
  ... thèmes ['common'],
  ... thèmes ['light'],
})

const darkTheme = () => ({
  ... thèmes ['common'],
  ... thèmes ['dark'],
})

const Header = styled.h1`
    couleur de fond: rose;
    Couleur blanche;
`

const App = () => {
  const [theme, setTheme] = useState (lightTheme ())
  const setDarkTheme = () => setTheme (darkTheme ())
  const setLightTheme = () => setTheme (lightTheme ())
    revenir (
        
            <>
                
 Bonjour Réagissez 
                 Allumez la lumière 
                 Allumez la nuit 
            >
        
    )
}

exportation par défaut

Premièrement, nous avons importé le crochet useState de réagit ThemeProvider de thèmes et thèmes de ./ utils / themes .

Nous avons ensuite créé deux fonctions de flèche, lightTheme et darkTheme .

Le La fonction lightTheme renvoie un objet combinant les propriétés communes et light des thèmes importés .

Donc, fondamentalement, le lightTheme fonction après évaluation est la suivante:

 const lightTheme = () => ({
    famille de polices:
        "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans serif",
    type: 'lumière',
    bgColor: 'blanc',
    couleur: '# 3E4C59',
    searchBgColor: '# E4E7EB',
    boxShadow: '0.8rem 0.8rem 1.5rem grey',
    catégorieCouleur: '# 999',
    categoryHoverColor: '# 333',
})

La fonction darkTheme renvoie un objet combinant les propriétés communes et dark des thèmes importés .

Ainsi, la fonction darkTheme après évaluation ressemble à ceci:

 const darkTheme = () => ({
    famille de polices:
        "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans serif",
    type: 'sombre',
    bgColor: '# 1F2933',
    couleur: '# E4E7EB',
    searchBgColor: '# E4E7EB',
    boxShadow: '0.4rem 0.4rem 1.5rem # 111111',
    categoryColor: '# CBD2D9',
    categoryHoverColor: '# 9AA5B1',
})

Plus tard, dans le composant App nous utilisons le useState Crochet de réaction:

 const App = () => {
  const [theme, setTheme] = useState (lightTheme ())
  const setDarkTheme = () => setTheme (darkTheme ())
  const setLightTheme = () => setTheme (lightTheme ())
    revenir (
        
            <>
                
 Bonjour Réagissez 
                 Allumez la lumière 
                 Allumez la nuit 
            >
        
    )
}

useState prend l'état par défaut, que nous avons défini sur lightTheme () . Si vous le définissez sur darkTheme () le thème sombre sera affiché par défaut. useState renvoie deux variables, nommées thème et setTheme . Vous pouvez les nommer n’importe quoi.

Le thème contient l’état actuel, c’est-à-dire, lightTheme () - et setTheme est une fonction utilisée pour définir une nouvelle Nous avons ensuite la fonction setDarktheme qui les assombrit en appelant setTheme et en lui passant l'objet renvoyé par la fonction darkTheme () . La fonction setLightTheme fonctionne de manière similaire.

Enfin, nous avons deux boutons supplémentaires permettant de changer de thème - l'un pour le changer en light et l'autre en dark .

Mais pour que cela fonctionne, nous devons modifier notre composant Header à l'aide de thèmes. Modifiez-le comme suit:

 const Header = styled.h1`
    background-color: $ {props => props.theme.bgColor};
    couleur: $ {props => props.theme.color};
`

Le thème de la lumière ressemble à ceci:

Si vous cliquez sur le bouton Dark Theme le thème sombre s'affichera comme suit :

Styled Components présente une fonctionnalité qui vous permet de modifier dynamiquement les styles de vos composants à l'aide d'un accessoire. La variable background-color utilise le support theme.bgColor tandis que color utilise le support theme.color .

Le theme la variable mentionnée ici provient de ThemeProvider . L'accessoire fourni à ThemeProvider devrait être nommé theme . Sinon, cela ne fonctionnera pas.

Maintenant, essayez de cliquer sur les boutons pour voir les thèmes changer.

Les thèmes changent, mais il est difficile de choisir le bouton sur lequel cliquer. Ajoutons une condition qui affiche le bouton du thème clair uniquement lorsque le thème sombre est affiché, et inversement.

Modifiez les boutons dans App.js comme suit:

 {theme.type == = 'dark' &&  Allumez la lumière }
{theme.type === 'light' &&  Dégagez la nuit }

Ce conditionnel permet de n’afficher que le bouton approprié en fonction du thème sélectionné.

Affiche uniquement le bouton light du bouton dark :

Affiche uniquement bouton sombre bouton sur lumière thème:

thème Voir le bouton noir sur thème lumineux

Allez-y et téléchargez le dossier assets / et collez-le dans le répertoire src / .

Cela garantira que nous avons toutes les images et nous avons besoin de ce projet.

Modifions maintenant les boutons en icônes. Le bouton clair sera représenté par une icône soleil et le bouton noir par une icône lune

Importez les icônes dans App.js :

 import {ReactComponent as MoonSVG} from './assets /logos/moon.svg '
importer {ReactComponent as SunSVG} depuis './assets/logos/sun.svg'

Créez ensuite un style pour ces icônes en agrandissant le fichier SVG. Ce qui suit ajoute des styles à la balise svg :

 const SunIcon = styled (SunSVG) `
  largeur: 2rem;
  hauteur: 2rem;
  marge gauche: auto;
  curseur: pointeur;
`

const MoonIcon = styled (MoonSVG) `
  largeur: 2rem;
  hauteur: 2rem;
  marge gauche: auto;
  curseur: pointeur;
`

Remarquez comment nous reproduisons le code ci-dessus dans les SunIcon et MoonIcon . Les composants stylés prennent en charge la réutilisation des styles.

CSS réutilisable dans les composants stylés

Les composants stylés nous permettent de réutiliser des styles à l'aide d'une fonction d'assistance spéciale nommée css . Importez-le à partir de styled-components comme suit:

 import styled, {css, ThemeProvider} à partir de 'styled-components'

Vous pouvez maintenant réutiliser des styles en utilisant l'accessoire css comme suit:

 const ThemeIcon = css`
  largeur: 2rem;
  hauteur: 2rem;
  marge gauche: auto;
  curseur: pointeur;
`

const MoonIcon = styled (MoonSVG) `
  $ {ThemeIcon}
`

const SunIcon = styled (SunSVG) `
  $ {ThemeIcon}
`

Enfin, modifiez les boutons comme suit:

 {theme.type === 'light' && }
{theme.type === 'dark' && }

Le fichier App.js devrait maintenant ressembler à ceci:

 import React, {useState} à partir de 'react'
importer styled, {css, ThemeProvider} à partir de 'styled-components'
importer {ReactComponent as MoonSVG} depuis './assets/logos/moon.svg'
importer {ReactComponent as SunSVG} depuis './assets/logos/sun.svg'
importer {themes} de './utils/themes'

const lightTheme = () => ({
  ... thèmes ['common'],
  ... thèmes ['light'],
})

const darkTheme = () => ({
  ... thèmes ['common'],
  ... thèmes ['dark'],
})

const ThemeIcon = css`
  largeur: 2rem;
  hauteur: 2rem;
  marge gauche: auto;
  curseur: pointeur;
`

const MoonIcon = styled (MoonSVG) `
  $ {ThemeIcon}
`

const SunIcon = styled (SunSVG) `
  $ {ThemeIcon}
`

const App = () => {
    const [theme, setTheme] = useState (lightTheme ())
  const setDarkTheme = () => setTheme (darkTheme ())
  const setLightTheme = () => setTheme (lightTheme ())
    revenir (
        
            <>
                
 Bonjour Réagir 
                {theme.type === 'light' && }
                {theme.type === 'dark' && }
            >
        
    )
}

exportation par défaut

Et le site devrait maintenant ressembler à ceci. Cela ne montre que l'icône de la lune sur le thème de la lumière :

Et il ne montre que le soleil icône sur dark thème:

Styles globaux dans les composants stylés

À présent, créez un composant / [ dossier dans le répertoire src / . Créez un fichier nommé Global.js dans le dossier composants / . Collez-y les éléments suivants:

 import {createGlobalStyle} à partir de 'styled-components'

export const GlobalStyle = createGlobalStyle`
    *, *::avant après {
        taille de la boîte: boîte à bordure;
        marge: 0;
        rembourrage: 0;
    }

    html, body {
        hauteur: 100vh;
        largeur maximale: 100%;
        taille de police: 62,5%;
        background-color: $ {props => props.theme.bgColor};
        couleur: $ {props => props.theme.color};
        font-family: $ {props => props.theme.fontFamily};
    }
`

Nous avons importé de créer un GlobalStyle à partir de de composants stylisés . Cela nous permet de créer des styles globaux. Et nous avons ensuite exporté la variable GlobalStyle en tant qu’exportation nommée. Remarquez comment nous utilisons les thèmes dans notre GlobalStyle . Pour vous assurer que les thèmes fonctionnent, nous devons faire de GlobalStyle un enfant de ThemeProvider . Sinon, cela ne fonctionnera pas.

Continuez et importez Global.js in App.js et utilisez-le comme suit:

 import {GlobalStyle} de './ composants / Global '

.
.
.

const App = () => {
    .
    .
    .
    revenir (
        
            <>
                
                
 Bonjour Réagir 
                {theme.type === 'light' && }
                {theme.type === 'dark' && }
            >
        
    )
}

.
.
.

Les styles globaux doivent être appliqués à notre application Web.

Les styles globaux appliqués au thème light :

aux styles globaux appliqués à la lumière " width="3680" height="2000" class="alignnone size-full wp-image-173485"/>

Styles globaux appliqués sur le thème dark :

Maintenant que nous connaissons les bases, créons la barre de navigation de notre nouvelle conception Unsplash. Tout d'abord, supprimez le composant Header de App.js .

Ensuite, ajoutez le texte suivant dans le fichier App.js :

 importer {ReactComponent as SearchSVG} à partir de './assets/logos/search.svg'
importer {ReactComponent as UnsplashLogoSVG} depuis './assets/logos/unsplash-logo.svg'
.
.
.

const Nav = styled.nav`
  affichage: flex;
  align-items: centre;
  background-color: $ {props => props.theme.bgColor};
  taille de la boîte: boîte à bordure;
  hauteur: 8.2rem;
  rembourrage gauche: 2rem;
  padding-right: 2rem;
  position: fixe;
  largeur: 100%;
  z-index: 2;
`

const UnsplashLogo = styled (UnsplashLogoSVG) `
  remplir: $ {props => props.theme.color};
  largeur: 4rem;
  hauteur: 4rem;
  visibilité face arrière: masquée;
  taille de la boîte: boîte à bordure;
  débordement caché;
  alignement vertical: milieu;
`

const TitleWrapper = styled.div`
  affichage: flex;
  direction de flexion: colonne;
  marge gauche: 1rem;
`

const Titre = styled.h1`
  affichage: inline-block;
  taille de la police: 2rem;
  poids de la police: 700;
  couleur: $ {props => props.theme.color};
`

const Subtitle = styled.span`
  taille de la police: 1.3rem;
  poids de la police: 500;
`

const SearchWrapper = styled.div`
  affichage: flex;
  align-items: centre;
  arrière plan: $ {props => props.theme.searchBgColor};
  border-radius: 3rem;
  bordure: solide 0.05rem # cbd2d9;
  marge gauche: 7rem;
  boîte-ombre: aucune;
  : survoler {
    bordure: 0,12 solide solide # cbd2d9;
  }
`

const SearchIcon = styled (SearchSVG) `
  remplir: # 9aa5b1;
  largeur: 1.6rem;
  hauteur: 1.6rem;
  marge gauche: 1.2rem;
  marge droite: 1rem;
`

const SearchBar = styled.input`
  contour: aucun;
  frontière: aucune;
  largeur: 50rem;
  rembourrage: 1rem 0;
  couleur: $ {props => props.theme.categoryHoverColor};
  fond: transparent;
  taille de la police: 1.4rem;
  poids de la police: 300;
`

const App = () => {
  ..
  ..
  ..
  revenir (
    
      <>
        
        
      >
    
  )
}

..
..
..

Notez que la seule chose que nous avons faite différemment consiste à ajouter une pseudo classe : hover sur le composant SearchWrapper . Si vous venez de Sass ou de SCSS, alors Styled Components est assez similaire. Vous pouvez même ajouter des sélecteurs enfants dans un composant stylé, comme Sass.

Le navigateur devrait être correctement affiché maintenant.

La barre de navigation du thème light :

La barre de navigation sur le dark thème:

Créons un composant pour les catégories de listage. Créez un fichier categories.js dans le dossier utils / et collez ce qui suit:

 export const categories = [
  'Wallpapers',
  'Textures & Patterns',
  'Nature',
  'Current Events',
  'Architecture',
  'Business & Work',
  'Film',
  'Animals',
  'Travel',
  'Fashion',
  'Food & Drink',
  'Spirituality',
  'Experimental',
  'People',
  'Health',
  'Arts & Culture',
]

Créez également un composant nommé CategoriesList.js dans le dossier composants / .

Collez-y le code suivant:

 import Réagissez à partir de 'réagir'
importer des styles à partir de 'styled-components'
importer {categories} de '../utils/categories'

const Catégories = styled.div`
  rembourrage en bas: 2rem;
  rembourrage gauche: 2rem;
  position: fixe;
  marge supérieure: 8,2rem;
  en haut: 0;
  en bas: 0;
  débordement-y: faire défiler;
  largeur: 23rem;
  fond: $ {props => props.theme.bgColor};
  z-index: 2;
`

const CategoryName = styled.a`
  couleur de fond: transparent;
  curseur: pointeur;
  taille de la boîte: boîte à bordure;
  couleur: $ {props => props.theme.categoryColor};
  bloc de visualisation;
  taille de la police: 1.4rem;
  poids de la police: 500;
  hauteur de ligne: 1;
  rembourrage en bas: 1.7rem;
  rembourrage en haut: 2.1rem;
  texte-décoration: aucun;
  espace blanc: maintenant;
  : survoler {
    couleur: $ {props => props.theme.categoryHoverColor};
    contour: aucun;
  }
`

const Category = ({name}) =>  {name} 

export const CategoriesList = () => (
  
    {categories.map ((category, i) => (
      
    ))}
  
)

Maintenant, importez-le dans App.js et collez-le juste en dessous du composant Nav :

 import {CategoriesList} à partir de './components/CategoriesList'
..
..
..

const App = () => {
  ..
  ..
  ..
  revenir (
    
      <>
        
        
         ..
        ..
        ..
      >
    
  )
}

..
..
..

Maintenant, une liste de catégories apparaît dans l'encadré

La liste de catégories du thème light :

La liste des catégories sur le thème dark :

Créons notre composant final qui affiche des images. Créez un fichier nommé pics.js dans le dossier utils / . Collez-y ce qui suit:

 export const pics = [
  require('../assets/pics/asset 0.jpeg'),
  require('../assets/pics/asset 1.jpeg'),
  require('../assets/pics/asset 2.jpeg'),
  require('../assets/pics/asset 3.jpeg'),
  require('../assets/pics/asset 4.jpeg'),
  require('../assets/pics/asset 5.jpeg'),
  require('../assets/pics/asset 6.jpeg'),
  require('../assets/pics/asset 7.jpeg'),
  require('../assets/pics/asset 8.jpeg'),
  require('../assets/pics/asset 9.jpeg'),
  require('../assets/pics/asset 10.jpeg'),
  require('../assets/pics/asset 11.jpeg'),
  require('../assets/pics/asset 12.jpeg'),
  require('../assets/pics/asset 13.jpeg'),
  require('../assets/pics/asset 14.jpeg'),
  require('../assets/pics/asset 15.jpeg'),
  require('../assets/pics/asset 16.jpeg'),
  require('../assets/pics/asset 17.jpeg'),
  require('../assets/pics/asset 18.jpeg'),
  require('../assets/pics/asset 19.jpeg'),
  require('../assets/pics/asset 20.jpeg'),
  require('../assets/pics/asset 21.jpeg'),
  require('../assets/pics/asset 22.jpeg'),
  require('../assets/pics/asset 23.jpeg'),
  require('../assets/pics/asset 24.jpeg'),
  require('../assets/pics/asset 25.jpeg'),
  require('../assets/pics/asset 26.jpeg'),
  require('../assets/pics/asset 27.jpeg'),
  require('../assets/pics/asset 28.jpeg'),
  require('../assets/pics/asset 29.jpeg'),
  require('../assets/pics/asset 30.jpeg'),
  require('../assets/pics/asset 31.jpeg'),
  require('../assets/pics/asset 32.jpeg'),
  require('../assets/pics/asset 33.jpeg'),
  require('../assets/pics/asset 34.jpeg'),
  require('../assets/pics/asset 35.jpeg'),
  require('../assets/pics/asset 36.jpeg'),
  require('../assets/pics/asset 37.jpeg'),
  require('../assets/pics/asset 38.jpeg'),
  require('../assets/pics/asset 39.jpeg'),
  require('../assets/pics/asset 40.jpeg'),
  require('../assets/pics/asset 41.jpeg'),
  require('../assets/pics/asset 42.jpeg'),
  require('../assets/pics/asset 43.jpeg'),
  require('../assets/pics/asset 44.jpeg'),
  require('../assets/pics/asset 45.jpeg'),
  require('../assets/pics/asset 46.jpeg'),
  require('../assets/pics/asset 47.jpeg'),
  require('../assets/pics/asset 48.jpeg'),
  require('../assets/pics/asset 49.jpeg'),
  require('../assets/pics/asset 50.jpeg'),
  require('../assets/pics/asset 51.jpeg'),
  require('../assets/pics/asset 52.jpeg'),
  require('../assets/pics/asset 53.jpeg'),
]

Créez également un fichier Pic.js dans le dossier components / et collez ce qui suit:

 import Réagissez à partir de 'react'
importer ImageZoom de 'react-medium-image-zoom'
importer des styles à partir de 'styled-components'

const ImageWrapper = styled.div`
  marge: 0,5 rem;
  transition: tous les 200ms facilité;
  : survoler {
    box-shadow: $ {props => props.theme.boxShadow};
    transformation: échelle (1,005);
  }
`

export const const = ({src, i}) => {
  const alt = `Refonte Unsplash # $ {i}`
  const imageProps = {src, alt}
  revenir (
    
      
    
  )
}

Nous utilisons du type réactif-moyen-image-zoom qui vous permet de zoomer sur une image telle que Medium .

Maintenant importez-le Pic .js dans App.js et collez-le juste en dessous du composant CategoriesList . Ajoutez également Grid et GridWrapper ont stylé les composants comme suit:

 import {Pic} de './components/Pic'
importer {photos} de './utils/pics'

..
..
..

const GridWrapper = styled.div`
  affichage: flex;
  justifier-contenu: centre;
`

const Grid = styled.div`
  rembourrage en haut: 8.2rem;
  padding-left: 23rem;
  affichage: grille;
  Grille-modèle-colonnes: répéter (3, 38rem);
  marge inférieure: 1,5 rem;
`

const App = () => {
  ..
  ..
  ..
  revenir (
    
      <>
        ..
        ..
        ..
        
        
          
             {pics.map ((pic, i) => (
              
            ))}
          
        
      >
    
  )
}

..
..
..

Maintenant, une grille avec des images devrait apparaître.

La refonte de Unsplash avec le thème :

[1945900]] La refonte de Unsplash - Le thème de lumière " width="3680" height="2000" class="alignnone size-full wp-image-173481"/>]. dark thème:

Nous venons de redéfinir Unsplash en utilisant des composants stylisés . Essayez d’agrandir l’image pour la voir fonctionner. Vous pouvez consulter la démonstration en direct ici .

Conclusion

Styled Components facilite l’écriture de CSS en clair dans votre JS. Cela nous permet de colocaliser des styles avec nos composants afin de pouvoir ajouter, modifier ou supprimer facilement des styles.

Nous avons appris à ajouter des styles globaux et à les réutiliser à l'aide d'un accessoire css et à thème une application. Nous n'avons fait qu'effleurer la surface avec des composants de style ; il a beaucoup plus à offrir. Vous pouvez en apprendre plus à ce sujet sur le site officiel .

Nous avons finalement repensé Unsplash à l'aide de composants stylisés. Le code complet est disponible sur GitHub et la démo est disponible ici .