O styled-components é uma ferramenta excelente para quem desenvolve front-end. Com ela, podemos facilmente criar componentes independentes e separados da nossa aplicação sem ter que se preocupar com os nomes das classes CSS.

Nesse artigo, abordarei alguns exemplos de boas práticas com styled-components que faço em meus projetos.

Classes CSS

Vamos supor que nós tenhamos um componente Button, e que ele terá diferentes tamanhos para cada página da aplicação.

const Button = styled.button`
  background: #47b04b;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 15px 20px;
  transition: 0.5s;
  margin: 20px;
  &:hover {
    box-shadow: 0 0 6px 1px #20bc2678;
    background: #32b437;
  }
`

O mais comum é criarmos uma classe CSS para cada tamanho e alterar o className do Button para o tamanho que a gente quer.

const Button = styled.button`
 ...
 &.small {
  width: 100px;
  font-size: 14px;
 }
 
 &.medium {
  width: 150px;
  font-size: 16px;
 }
 
 &.large {
  width: 250px;
  font-size: 18px;
 }
 
 &.xlarge {
  width: 350px;
  font-size: 28px;
 }
`

Agora, vamos supor que precisemos de mais classes para alterar as cores dos nossos botões.

const Button = styled.button`
 ...
 
 &.primary {
  background-color: #007bff;
 }
 
 &.success {
  background-color: #28a745;
 }
 
 &.warning {
  background-color: #ffc107;
 }
 
 &.danger {
  background-color: #dc3545;
 }
`

Nesse exemplo, temos classes CSS que apenas alteram o tamanho e a cor do componente mas poderíamos ter milhares de outras classes.

Quando temos muitas classes CSS podemos nos perder no código e demorar para entender o que, exatamente, cada classe faz. O mais indicado seria usar props.

Podemos simplesmente passar as props que desejamos que o componente tenha em cada página da aplicação. No nosso caso, podemos passar a prop size e a prop color.

//index.js 
<Button size="small" color="primary">Entrar</Button>

//styled.js
const Button = styled.button`
 ...
`

E em nosso styled.js, criaremos um objeto chamado modifierButton, e dentro dele funções com os nomes dos valores das props que acabamos de passar para o componente.

import styled, { css } from "styled-components"
 
 const modifierButton = {
  small: () => css`
    width: 100px;
    font-size: 14px;
  `,
  
  medium: () => css`
    width: 150px;
    font-size: 16px;
  `,
  
  large: () => css`
    width: 250px;
    font-size: 18px;
  `,
  
  xlarge: () => css`
    width: 350px;
    font-size: 20px;
  `,
  
  primary: () => css`
    background-color: #007bff;
  `,
  
  success: () => css`
    background-color: #28a745;
  `,
  
  warning: () => css`
    background-color: #ffc107;
  `,
  
  danger: () => css`
    background-color: #dc3545;
  `,
 }

Agora, é só receber a props passada no componente em nosso arquivo styled.js e chamar a modifierButton de acordo com o valor da própria props.

const Button = styled.button`
 ... 
 
 $({ size, color }) => css`
  ${!!size && modifierButton[size]()}
  ${!!color && modifierButton[color]()}
 `
 
`

Com isso carregamos dinamicamente o estilo que queremos no componente via props.

Note que, eu faço uma validação em ${!!size...} e outra em ${!!color ...}. Se a validação passar, vai ser chamado uma função dentro do modifierButton de acordo o valor de size ou color

CSS Aninhado

Você já deve ter visto/feito um componente com vários elementos dentro de outro elemento dentro de outro elemento e assim por diante.

export const section = styled.section`
 background-color: #fff;
 display: flex;
 justify-content: center;
 
 &.about {
  background: #aaa;
  padding: 20px;
  .content {
   background-color: #aaa;
   .card {
    .card-header {
     h1 {
      span {
       color: #32b437;
      }
     }
    }
   }
  }
 } 
`

Ao invés de fazer um componente com muitos elementos internos, classes e subclasses, quebre esse componente em diversos outros componentes.

export const About = styled(Section)`
  background: #aaa;
  padding: 20px;
`
export const Content = styled.div`
 ...
`
export const Card = styled.div`
 ...
`
export const CardHeader = styled.div`
 ...
`

Dessa forma, o código fica mais organizado e de fácil compreensão.

Sobrescrever CSS

Em alguns casos, quando estamos usando biblioteca de terceiros principalmente, precisamos alterar um componente que já possui seus estilos próprios dentro de alguma página na nossa aplicação.

Para isso, podemos importar o componente que queremos alterar e criar outro componente a partir dele.

Com a função styled(componente), conseguimos importar todo o estilo de algum elemento e aplicar no componente que estamos criando.

export const About = styled(Section)`
  background: #aaa;
  padding: 20px;
`

Também podemos importar dentro do nosso componente 'pai' o componente 'filho' que queremos alterar. Nesse caso, o componente Button apenas terá color: red; dentro do componente About.

export const About = styled.section`
 ${Button} {
  color: red;
 }
`

Conclusão

E chegamos ao fim desse post.😁

Mostrei algumas práticas que faça no meu dia a dia desenvolvendo com styled-components e que tem me ajudado bastante, espero que esse conteúdo tenha te ajudado de alguma forma.

Até mais!👋