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!

Comments

[Marcy Sobral]

Seu artigo me ajudou muito! vlw :D