visão geral

É uma coleção de funções utilitárias que adiciona propriedades de estilo em seus componentes React com base em props.

o que é o styled system

O styled system nada mais é do que uma coleção de funções utilitárias que irá auxiliar na estilização de componentes React criados com styled-components, facilitando a aplicação de diversas propriedades do CSS.

A maior vantagem do styled system é que ele permite que você estilize seus componentes com base em props, o que torna a estilização mais dinâmica. Além de seguir o tema do design system de uma forma muito mais simples.

funções que o styled system disponibiliza

Você pode encontra-las no menu de navegação a esquerda, dentro da categoria propriedades de estilo, também é possível utilizar a função system para utilizar todas as propriedades de estilo de uma vez só. Confira a documentação do system aqui.

instalação

Para instalar o styled system, basta executar o seguinte comando:

yarn add @olist/styled-system

como utilizar

Para usar o styled system, você precisa importar as funções que deseja utilizar e aplica-las na função styled do styled-components.

exemplos

import styled from 'styled-components';
import { color, spacing } from '@olist/styled-system';

const MyComponent = styled.div`
  ${color}
  ${spacing}
`;

A partir de agora o componente <MyComponent /> já esta preparado para receber as styled-props de color e spacing.

<MyComponent
  color="primary.base"
  paddingTop="stack.small"
  paddingBottom="stack.medium"
/>

Internamente o styled system irá aplicar as propriedades CSS correspondentes para cada propriedade de estilo que você passou buscando os valores no tema atual.

utilização com typescript

Uma grande vantagem é utilizar os tipos do styled system para que o typescript possa te ajudar a identificar os possíveis valores que você pode passar para cada propriedade de estilo, e assim saber se a propriedade desejada pode receber algum valor do tema atual.

import styled from 'styled-components';
import {
  backgroundColor,
  color,
  spacing,
  type BackgroundColorProps,
  type ColorProps,
  type SpacingsProps,
} from '@olist/styled-system';

const MyComponent = styled.div<
  BackgroundColorProps & ColorProps & SpacingsProps
>`
  ${backgroundColor}
  ${color}
  ${spacing}
`;

Após a utilização da tipagem, o typescript irá te ajudar a identificar as possíveis propriedades e valores que você pode utilizar em seu componente.