Notre équipe utilise
des composants stylisés pour styliser les
composants réactifs.
Il y a déjà des articles sur les composants stylisés sur Habré, donc nous ne nous attarderons pas sur cela en détail.
Présentation des composants stylésMieux, plus rapide, plus puissant: les composants de style v4Après avoir écrit de nombreux composants, nous avons constaté que dans presque tous les composants, nous copions des propriétés en double.
Par exemple, dans de nombreux composants, nous avons écrit comme ceci:
padding-top: ${props => props.paddingTop || '0'}; padding-bottom: ${props => props.paddingBottom || '0'}; padding-right: ${props => props.paddingRight || '0'}; padding-left: ${props => props.paddingLeft || '0'};
Système stylé
La copie des propriétés en double a commencé à devenir ennuyeuse, et nous avons extrait les morceaux de code en double dans des fonctions réutilisables distinctes. Mais je pensais que peut-être quelqu'un avait déjà mis en œuvre quelque chose comme ça avant nous et probablement plus magnifiquement et universellement. J'ai commencé à google et j'ai trouvé un
système de style .
Styled-System fournit un ensemble de fonctionnalités de style. Chaque fonction de style fournit son propre ensemble de propriétés qui stylisent les éléments en fonction des valeurs définies dans le thème de l'application. Le système stylisé possède une API riche avec des fonctions pour la plupart des propriétés CSS.
Exemple de système stylisé basé sur des composants stylisés
import { space, width, fontSize, color } from 'styled-system'; import styled, { ThemeProvider } from 'styled-components'; import theme from './theme'; const Box = styled.div` ${space} ${width} ${fontSize} ${color} `; render( <ThemeProvider theme={theme}> <Box p={3} bg="whites.10" color="orange"> This is a Box </Box> </ThemeProvider>, );
Avantages clés
- Ajoute des propriétés que vous pouvez utiliser dans vos propres thèmes.
- Réglage rapide de la taille de police, de la marge, du remplissage, de la largeur et d'autres propriétés CSS réactives via des accessoires
- Évolutivité de la typographie
- Évolutivité de la marge et du remplissage
- Prise en charge de n'importe quelle palette de couleurs
- Fonctionne avec la plupart des bibliothèques css-in-js, y compris les composants de style et l'émotion
- Utilisé par Rebass , Rebass Grid et Priceline Design System
Thèmes de connexion
Ci-dessus, j'ai fourni un exemple de code qui utilise ThemeProvider. Nous transmettons notre thème au fournisseur et le système stylisé y accède via des accessoires.
Un exemple de notre sujet
export const theme = { fontSizes: [ 12, 14, 16, 18, 24, 32, 36, 72, 96 ], space: [
Le système stylé tentera de trouver la valeur dans l'objet de thème en fonction des propriétés transmises du composant. L'imbrication approfondie des propriétés est prise en charge.Si la valeur transmise n'est pas trouvée dans la rubrique, la valeur est interprétée telle quelle.
Par exemple, nous avons passé le composant color = "red". Il n'y a pas de valeur color.red dans l'objet de rubrique, mais la valeur rouge sera traduite en css en rouge. Donc, après la transpilation dans l'inspecteur, nous verrons
color: red;
Autres exemples d'utilisation des valeurs de rubrique
Styles réactifs
Pour décrire rapidement des propriétés réactives, passez simplement un tableau de valeurs
<Box width={[ 1,
Variantes
Le système stylisé nous permet de définir des objets réutilisables dans notre rubrique qui contiennent des ensembles de couleurs, des styles de texte, etc. Par exemple, dans notre sujet ci-dessus, nous
Nous utilisons des options pour les tailles et les couleurs des boutons.
buttonSizes: { xs: ` height: 16px; padding: 0 16px; font-size: 10px; `, sm: ` height: 24px; padding: 0 24px; font-size: 13px; `, default: ` height: 24px; padding: 0 30px; font-size: 13px; `, }, buttonColors: { green: ` background-color: #a2d628; color: ${colorToRgba('#a2d628', 0.5)}; `, blue: ` background-color: #507bfc; color: ${colorToRgba('#507bfc', 0.5)}; `, lightBlue: ` background-color: #10aee7; color: ${colorToRgba('#10aee7', 0.5)}; `, default: ` background-color: #cccccc; color: ${colorToRgba('#cccccc', 0.5)}; ` }
Mise en œuvre de l'option:
export const buttonSize = variant({ prop: 'size', key: 'buttonSizes' }); export const buttonColor = variant({ prop: 'colors', key: 'buttonColors' });
Composant du bouton
export const Button = styled(Box.withComponent('button'))` ${buttonSize} ${buttonColor} `; Button.propTypes = { ...buttonSize.propTypes, ...buttonColor.propTypes, }
Un exemple d'utilisation d'un bouton bleu de taille moyenne
<Button size="md" colors="blue" />
Une description et une documentation plus détaillées du système stylisé au
bureau. page githubUPD: lors de l'écriture d'un article, le système stylisé a sa propre page avec la documentation et des exemples
https://styled-system.com/ .