Nossa equipe usa
componentes com estilo para modelar
componentes de reação.
Já existem artigos sobre componentes estilizados em Habré, portanto, não vamos nos deter sobre isso em detalhes.
Introdução aos componentes com estiloMelhor, mais rápido, mais poderoso: componentes com estilo v4Tendo escrito muitos componentes, descobrimos que em quase todos os componentes copiamos propriedades duplicadas.
Por exemplo, em muitos componentes, escrevemos assim:
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 estilizado
A cópia de propriedades duplicadas começou a ficar irritante, e puxamos trechos de código duplicados para funções reutilizadas separadas. Mas eu pensei que talvez alguém já tivesse implementado algo assim antes de nós e provavelmente mais bonito e universal. Comecei a pesquisar no google e encontrei um
sistema com estilo .
O Styled-System fornece um conjunto de recursos de estilo. Cada função de estilo fornece seu próprio conjunto de propriedades que estilizam elementos com base nos valores definidos no tema do aplicativo. O sistema com estilo possui uma API rica com funções para a maioria das propriedades CSS.
Exemplo de sistema estilizado com base em componentes estilizados
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>, );
Principais Benefícios
- Adiciona propriedades que você pode usar em seus próprios temas.
- Configuração rápida de tamanho de fonte, margem, preenchimento, largura e outras propriedades css responsivos via adereços
- Escalabilidade de tipografia
- Escalabilidade de margem e preenchimento
- Suporte para qualquer paleta de cores
- Funciona com a maioria das bibliotecas css-in-js, incluindo componentes estilizados e emoção
- Usado pelo Rebass , Rebass Grid e Priceline Design System
Temas de conexão
Acima, forneci um exemplo de código que usa ThemeProvider. Passamos nosso tema para o provedor, e o sistema estilizado acessa-o através de adereços.
Um exemplo do nosso tópico
export const theme = { fontSizes: [ 12, 14, 16, 18, 24, 32, 36, 72, 96 ], space: [
O sistema com estilo tentará encontrar o valor no objeto de tema com base nas propriedades passadas do componente. O aninhamento profundo de propriedades é suportado, se o valor transmitido não for encontrado no tópico, o valor será interpretado como está.
Por exemplo, passamos o componente color = "red". Não há valor color.red no objeto do tópico, mas o valor vermelho será convertido para css como vermelho. Então, após a transpilação no inspetor, veremos
color: red;
Outros exemplos de uso de valores de tópico
Estilos responsivos
Para descrever rapidamente propriedades responsivas, basta passar uma matriz de valores
<Box width={[ 1,
Variantes
O sistema com estilo nos permite definir objetos reutilizáveis em nosso tópico que contêm conjuntos de cores, estilos de texto e assim por diante. Por exemplo, em nosso tópico acima, nós
Usamos opções para os tamanhos e cores dos botões.
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)}; ` }
Implementação da opção:
export const buttonSize = variant({ prop: 'size', key: 'buttonSizes' }); export const buttonColor = variant({ prop: 'colors', key: 'buttonColors' });
Componente do botão
export const Button = styled(Box.withComponent('button'))` ${buttonSize} ${buttonColor} `; Button.propTypes = { ...buttonSize.propTypes, ...buttonColor.propTypes, }
Um exemplo de uso de um botão azul de tamanho médio
<Button size="md" colors="blue" />
Uma descrição e documentação mais detalhadas do sistema com estilo no
escritório. página do githubUPD: ao escrever um artigo, o sistema estilizado possui sua própria página com documentação e exemplos
https://styled-system.com/ .