React: Styled Components

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.

Utilizando Styled Components no React

Neste artigo você aprenderá sobre a biblioteca Styled Components e como a utilizamos para criar componentes de estilo em React JS.