Artigos React Utilizando Styled Components no React

Conhecendo o Styled Components

O Styled Components é uma biblioteca (lib) do React e do React Native que nos permite criar componentes de estilo ao escrever códigos CSS dentro de um arquivo JavaScript.

O modo de estilizar um componente utilizando a biblioteca Styled Components também é conhecido como CSS-in-JS (CSS dentro do JavaScript).

Styled Components: na prática

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`
Código 1. Style Components na prática

Instalando o Styled Components

Já que o Styled Components é de uma biblioteca, para utilizá-la em nosso projeto React devemos realizar a sua instalação, que pode ser feita de duas maneiras: com o uso do Yarn ou do Npm.

Para realizar a instalação da biblioteca utilizando o Yarn como gerenciador de pacotes, podemos utilizar o comando abaixo:

yarn add styled-components

Em alternativa ao Yarn, também podemos instalar a biblioteca utilizando o Npm como gerenciador de pacotes. Para isso utilizamos o comando abaixo:

npm install styled-components --save

Sintaxe

O Styled Components possui um padrão de criação dos seus componentes para que seja escrito o código CSS-in-JS, como vemos no exemplo do Código 2.

import styled from ‘styled-components’;

const Form = styled.form`
   background-color: gray;
`;
Código 2. Sintaxe do style components

Note que na primeira linha do Código 2 temos a importação da biblioteca dentro de um arquivo JavaScript.

Já na terceira linha do Código 2 perceba que o componente criado com o styled + um elemento HTML será armazenado dentro de uma variável.

Desta forma poderemos importar esta variável no código React para ser utilizada.

Note também que para escrever o código CSS dentro do componente criado faremos uso de template strings, como vemos no exemplo do Código 3.

const Form = styled.form`
   background-color: gray;
`;
Código 3. Componente Form com a propriedade CSS dentro de um template strings
Template literals ou template strings é uma forma de criar uma cadeia de caracteres, utilizando o backtick (acento grave) para realizar a interpolação dos caracteres.

Exemplos de Styled Components

Exemplo 1

Nos Códigos 4 e 5 demonstraremos dois componentes criados com a biblioteca styled components.

import { Div, Title } from "./style";

export default function App() {
  return (
    <Div>
      <Title>Hello World!!!</Title>
    </Div>
  );
}
Código 4. App.js
import styled from "styled-components";

export const Div = styled.div`
  display: flex;
  justify-content: center;
  background-color: papayawhip;
`;

export const Title = styled.h1`
  color: palevioletred;
`;
Código 5. style.js

Exemplo 2

No exemplo dos Códigos 6 e 7 demonstraremos como passar props para um styled components. 

import { Input } from "./style";

export default function App() {
  return (
    <div>
      <Input defaultValue="@probablyup" type="text" />
      <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
    </div>
  );
}
Código 6. App.js
import styled from 'styled-components'

export const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;
Código 7. style.js

Note que no Código 6 o componente Input ao ser chamado pela segunda vez, passará a propriedade inputColor=”rebeccapurple.

Como pode ser visto no Código 7, essa propriedade será utilizada em uma estrutura condicional dentro do CSS do componente e o estilo referente ao props será acionado somente se a condição for atendida.

Exemplo 3

Nos Códigos 8 e 9 demonstraremos como estender componentes com o uso do Styled Components.

import { Button, TomatoButton } from "./style";

export default function App() {
  return (
    <div>
      <Button>Botão Normal</Button>
      <TomatoButton>Botão Tomate</TomatoButton>
    </div>
  );
}
Código 8. App.js
import styled from 'styled-components'

export const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;
Código 9. style.js

Note que neste exemplo do Código 9, o código referente ao componente Button será estendido para o componente TomatoButton.

Uma dica no caso de reutilizar o código de um componente de estilo é fazer um mapeamento do layout do seu projeto, assim você evita ficar desenvolvendo códigos repetidos e trabalha somente estendendo o código do componente necessário como uma base sólida para outro componente.