Parte 2: Configurando Styled Components

Até o momento, nossa template já possui:

• Compatibilidade entre múltiplos editores
• Padronização de Código automatizado
• Embelezamento de código automatizado

Agora, iremos configurar funcionalidades extra para nosso projeto. Uma delas, é o tão famoso Styled Components, que mudou a forma como escrevemos CSS/SCSS em projetos React. Vamos lá?

O que é o Styled Components?

Este é um pacote que surgiu por volta de 2016 e veio da necessidade do CSS se adequar a componentização proposta pelo React em sua criação. A ideia do Styled Components é criar componentes React com seu CSS individual e que pode ser facilmente replicado em outras páginas e outros projetos.

No exemplo abaixo, vemos a construção de um componente feito em Styled Components com estruturação de temas e aplicação em um JSX.

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> ); 

Legal não é? Vamos configura-lo em nossa template.

Instalando Styled Components

Para instalar o pacote, basta executar o comando abaixo:

yarn add styled-components # Logo após yarn add @types/styled-components -D 

Pronto, já está instalado. Agora, vamos utilizar uma configuração muito especial e que o Styled Components nos disponibiliza, a configuração de estilos globais.

Configurando Global Style

A configuração do Global Style ajuda a configurarmos um CSS comum a todas as páginas. Essa é uma pratica comum entre desenvolvedores para sobrescrever certas configurações padrão do navegador, além de configurar fontes e cores padrão. O Global Style também é um componente React que será importado em nosso App.tsx.

Vamos criar, dentro da pasta src uma pasta chamada styles e dentro dela o arquivo global.ts.

Para configurar o global style, apenas importamos essa configuração do styled components e exportamos o componente funcional criado:

import { createGlobalStyle } from 'styled-components'; export default createGlobalStyle` `; 

Aqui, a configuração fica a seu critério, mas, mostro abaixo a configuração comum que uso em meus projetos.

import { createGlobalStyle } from 'styled-components'; export default createGlobalStyle` * { margin: 0; padding: 0; box-sizing: border-box; outline: 0; } body { background: #312e38; color: #fff; -webkit-font-smoothing: antialiased; } body, input, button { font-family: 'Roboto Slab', serif; font-size: 16px; } h1, h2, h3, h4, h5, h6, strong { font-weight: 500; } button { cursor: pointer; } `; 

Ativando Global Style

Em nosso App.tsx, basta importarmos nosso componente e inseri-lo no retorno do App.

import React from 'react'; import GlobalStyle from './styles/global'; function App() { return ( <> <GlobalStyle /> </> ); } export default App; 

Pronto! Mais uma configuração feita em nossa template. Ela está disponível no github.

No próximo artigo, configuraremos o react-app-rewired que sobrescreve as configurações do webpack.

Te aguardo lá!
Obrigado pela leitura!