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.