Propriedades e Styled Components

No desenvolvimento de aplicações com a biblioteca React é comum a criação de componentes com um estio próprio. Umas das formas de fazer esta estilização sem a necessidade do uso de arquivos css é utilizando a biblioteca styled components, de uma forma bem simplificada, é possível dizer que esta permite criar o componente e o código de estilo em um único arquivo.

Muitas vezes é necessário criar um componente estilizado, porém desejamos passar algumas propriedades para o mesmo. Para evitar a necessidade de criar uma classe ou função, somente para atribuir essas propriedades ao componente React, podemos fazer uso do construtor attrs para adicionar essas propriedades na própria criação do componente estilizado. Um exemplo de como fazer isso é apresentado a seguir, onde é passada uma função para o construtor attrs e essa retorna um objeto com as propriedades desejadas. Percebe-se que é possível fazer uso do javascript internamente para fazer condicionais.

const Container = styled.div.attrs(props => ({
  // É possível criar um atributo do tipo estático 
  name: "password",
  // Também é possível fazer uso do próprio javascript para fazer condicionais
  size: props.size || "1em",
}))`
  color: black;
  font-size: 1em;
`;

Além disso, é possível fazer que o componente tenha diferentes estilos partindo dos valores de suas propriedades. No exemplo a seguir, cria-se um componente que tem a sua cor de fundo podendo ser modificada pela propriedade meanColor. Basicamente temos que informar, dentro da parte destinada para escrever o estilo, que iremos fazer uso de código javascrpt, para isso faz-se o uso do $. Após isso escreve-se uma função onde a entrada é a propriedade e faz-se o trecho condicional para aplicara cor vinda da propriedade ou utilizar uma cor padrão (aqui no caso o vermelho).

const container = styled.div`
  background-color: ${props => props.meanColor || "red"};
`

O exemplo apresentado é bem simples porém pode ser muito útil para quem está iniciando na criação de componentes estilizados, espere que tenha sido útil e até uma próxima.

← Blog