É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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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
. -
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.
-
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 avecstyled-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
>
)
}
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
>
)
}
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' && }
{theme.type === 'light' && }
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 .
Source link