Nuestro equipo utiliza
componentes con estilo para dise帽ar
componentes de reacci贸n.
Ya hay art铆culos sobre componentes con estilo en Habr茅, por lo tanto, no nos detendremos en esto en detalle.
Introducci贸n de componentes con estiloMejor, m谩s r谩pido, m谩s potente: componentes con estilo v4Habiendo escrito muchos componentes, encontramos que en casi todos los componentes copiamos propiedades duplicadas.
Por ejemplo, en muchos componentes escribimos as铆:
padding-top: ${props => props.paddingTop || '0'}; padding-bottom: ${props => props.paddingBottom || '0'}; padding-right: ${props => props.paddingRight || '0'}; padding-left: ${props => props.paddingLeft || '0'};
Sistema de estilo
La copia de propiedades duplicadas comenz贸 a ser molesta, y extrajimos partes duplicadas de c贸digo en funciones reutilizables separadas. Pero pens茅 que tal vez alguien ya hab铆a implementado algo como esto antes que nosotros y probablemente de manera m谩s bella y universal. Empec茅 a google y encontr茅 un
sistema con estilo .
Styled-System proporciona un conjunto de caracter铆sticas de estilo. Cada funci贸n de estilo proporciona su propio conjunto de propiedades que dan estilo a los elementos en funci贸n de los valores definidos en el tema de la aplicaci贸n. El sistema con estilo tiene una API rica con funciones para la mayor铆a de las propiedades CSS.
Ejemplo de sistema con estilo basado en componentes con estilo
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>, );
Beneficios clave
- Agrega propiedades que puede usar en sus propios temas.
- Configuraci贸n r谩pida de tama帽o de fuente sensible, margen, relleno, ancho y otras propiedades de CSS a trav茅s de accesorios
- Escalabilidad de tipograf铆a
- Escalabilidad de margen y relleno
- Soporte para cualquier paleta de colores.
- Funciona con la mayor铆a de las bibliotecas css-in-js, incluidos los componentes con estilo y la emoci贸n
- Utilizado por Rebass , Rebass Grid y Priceline Design System
Temas de conexi贸n
Arriba, proporcion茅 un ejemplo de c贸digo que usa ThemeProvider. Pasamos nuestro tema al proveedor, y el sistema con estilo accede a 茅l a trav茅s de accesorios.
Un ejemplo de nuestro tema.
export const theme = { fontSizes: [ 12, 14, 16, 18, 24, 32, 36, 72, 96 ], space: [
El sistema con estilo intentar谩 encontrar el valor en el objeto de tema bas谩ndose en las propiedades pasadas del componente. Se admite el anidamiento profundo de propiedades, si el valor transmitido no se encuentra en el tema, entonces el valor se interpreta como es.
Por ejemplo, pasamos el componente color = "rojo". No hay un valor color.red en el objeto de tema, pero el valor rojo se traducir谩 a css como rojo. Entonces, despu茅s de la transpilaci贸n en el inspector, veremos
color: red;
Otros ejemplos de uso de valores de temas
Estilos receptivos
Para describir r谩pidamente las propiedades receptivas, simplemente pase una matriz de valores
<Box width={[ 1,
Variantes
El sistema de estilo nos permite definir objetos reutilizables en nuestro tema que contienen conjuntos de colores, estilos de texto, etc. Por ejemplo, en nuestro tema anterior, nosotros
Utilizamos opciones de los tama帽os y colores de los botones.
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)}; ` }
Implementaci贸n de la opci贸n:
export const buttonSize = variant({ prop: 'size', key: 'buttonSizes' }); export const buttonColor = variant({ prop: 'colors', key: 'buttonColors' });
Componente del bot贸n
export const Button = styled(Box.withComponent('button'))` ${buttonSize} ${buttonColor} `; Button.propTypes = { ...buttonSize.propTypes, ...buttonColor.propTypes, }
Un ejemplo de uso de un bot贸n azul de tama帽o mediano
<Button size="md" colors="blue" />
Una descripci贸n m谩s detallada y documentaci贸n del sistema dise帽ado en la
oficina. p谩gina de githubUPD: mientras escrib铆a un art铆culo, el sistema con estilo ten铆a su propia p谩gina con documentaci贸n y ejemplos
https://styled-system.com/ .