DEV Community

Cover image for Parte 2: Configurando Styled Components
Ary Barros
Ary Barros

Posted on

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>
);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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`
`;
Enter fullscreen mode Exit fullscreen mode

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;
  }
`;
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
marcythany profile image
Marcy Sobral

Seu artigo me ajudou muito! vlw :D