Styled Components

O que é?

styled-components é uma biblioteca que ajuda criar componentes React a partir de elementos HTML, associando-os a estilos CSS de uma maneira simples e direta. A biblioteca permite a definição destes estilos diretamente em nossos arquivos JavaScript.

Como usar

Para instalar a biblioteca, simplesmente execute no terminal:

npm install --save styled-components

Depois disso, voce pode importar a biblioteca no seu código e começar a usá-la.

import styled from 'styled-components'

Sintaxe

A sintaxe utilizada pela biblioteca parece estranha inicialmente, mas é bem simples. Ela utiliza "crases" para englobar as regras de CSS que você está escrevendo, que são tagged template literals (não se preocupe muito com isso, só lembre de usar as crases quando criar um novo componente).

Nós recomendamos usar algum plugin para destacar a sintaxe da biblioteca. Você pode encontrar um para sua IDE na documentação oficial. styled-components: Tooling

Exemplo Simples

Dê uma olhada neste exemplo simples retirado da documentação oficial:

import styled, { css } from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);

Na primeira linha nós estamos importando a biblioteca styled e { css }. Na linha seguinte nós criamos um novo componentes Button que vai renderizar um botão HTML com os estilos CSS informados.

A importação { css } é usada para permitir um controle dinâmico de novas regras CSS com as propriedades passadas para o Styled Component.

Práticas comuns

Estas são duas práticas comumente utilizadas durante o desenvolvimento:

import styled, { css } from 'styled-components'

/*We can import pre-made components and edit them with the following syntax*/
import { Layout, Button } from 'antd';
const StyledLayout = styled(Layout)`
  height: auto;
  min-height: 100vh;
`;

/* We can also directly edit CSS classes for a given component*/
export const ButtonStyled = styled(Button)`
  font-weight: 700 !important;
    &.secondary{
        background-color: "red";
    border-color: "red";
    color: white;
  }
  &.outlined{
        background-color: transparent;
    color: "blue" !important;
    border-color: "blue" !important;  }
`;

render(
  <StyledLayout>
    <ButtonStyled class="secondary">Secondary Button</ButtonStyled>
    <ButtonStyled class="outlined">Outlined Button</ButtonStyled>
  </StyledLayout>
);

Aprenda Mais

styled-components: Documentation

Styled Components: To Use or Not to Use?

Prática

Crie alguns elementos com a biblioteca. Por exemplo:

  • Um Botão que muda a cor de background por props (styled.button...)
  • Um Container que centraliza elementos renderizados dentro dele (styled.div...)
  • Importe um elemento de alguma biblioteca (Antd ou MaterialUI) e crie um Styled Component a partir dele
← Redux-ThunkTailwind →