4 Razões para você utilizar styled components

Falaa Galeraaa! Antes de irmos para o assunto principal desse artigo, vamos ouvir juntos Rosa de Saron - O Sol da Meia Noite.

Quando eu estava pensando em desenvolver esse blog, eu pensei...

Eis a questão... Vou utilizar algum framework front-end tipo bootstrap, materialize ou fazer tudo do 0 utilizando Styled Components?

Claro que o mais confortável e rápido a se fazer e utilizar um framework que agiliza todo o processo... Mas estava disposta a desenvolver tudo do zero utilizando apenas o Styled Components. E é sobre ele que irei falar hoje, mostrando 4 razões para você utilizar essa lib fantástica!

O que e o Styled Components?

O styled components e uma lib que nos permite escrever código css dentro do JS ele nos permitem traduzir a definição dos estilos de nosso aplicativo em componentes, em vez de trabalhar em folhas de estilo CSS. Ele e compatível com vários navegadores, fácil de usar, permite que você atualize dinamicamente por meio das props.

Co-creator Max Stoiber says:

The basic idea of styled-components is to enforce best practices by removing the mapping between styles and components.

Vamos para o que interessa: As 4 Razões!

1. ThemeProvider

Uma das principais vantagens é a possibilidade de definir um theme para sua aplicação apenas envolvendo o ThemeProvider que consequentemente todos os componentes vão receber as variáveis do theme. Obs: Tudo isso e possível graças as API do React Context!

como, por exemplo:

const theme = {
	color: {
		red: '#ff0000'
	}
	fontSize:{
		h1: {
			fontSize: 2rem;
		}
	}
}

export default theme

No index.js

import React from "react"
import ReactDOM from "react-dom"
import theme from "./config/theme"
import App from "./App"
import { ThemeProvider } from "styled-components"

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
)

Agora qualquer componente estilizado tem acesso ao seu theme!

import styled from "styled-components"

export const Container = styled.div`
  background-color: ${props => props.theme.colors.red};
`

2. Passando atributos

Você consegue modificar o que irá renderizar em um componente e passar por parâmetros.

import styled from "styled-components"

export const Container = styled.div`
  background: ${props => (props.background ? props.background : "#F5F5F5")};
`

import React from "react"
import { Container } from "./styles"

const ContainerRed = () => {
  return <Container background="#fff"></Container>
}

export default ContainerRed

3. Referencias de elementos

Muito fácil fazer referências de elementos, muito semelhante também com o CSS ou Sass.

Supondo que um container e você deseja adicionar uma animação do hover, ficaria dessa maneira:

import styled from "styled-components"

export const Container = styled.div`
  background: yellow;

  &:hover {
    background: red;
  }
`

4. Estenda componentes com estilo

Outra coisa divertida no styled components e que você consegue estender um estilo já criado, assim você não sobrecarrega os componentes como, por exemplo:

import styled from "styled-components"

export const Button = styled.div`
  color: black;
`

import styled from "styled-components"
import { Button } from "./stylesDafault"

export const ButtonCancel = styled(Button)`
  color: red;
`

Existe muitos outros macetes, você consegue ver em detalhes na documentação.

Conclusão

O styled components nos fornecem uma maneira prática de trabalhar com os estilos onde você consegue “componentizar” e principalmente reutilizar seus estilos. Se você está na dúvida se deveria usar ou não, eu só digo uma coisa: use, teste e abuse! Conhecimento nunca e jogado fora.

Já utilizou essa incrível lib? Compartilha comigo aqui nos comentários, gostaria muito de saber!

Até a próxima.