Como Criar Estilo Global Com Styled Components - React

Em um post anterior, expliquei o que era e como podíamos utilizar styled-components.
Naquele post, ensinava à adicionar estilos em componentes próprios, criados especificamente.
Mas como podemos fazer, caso queiramos usar o styled para criar um estilo que se aplica para o body, html de toda nossa aplicação?

Com o Styled, conseguimos criar um estilo Global para nossa aplicação! Dessa forma, podemos adicionar nossas estilizações de reset, estilos para o body, para textos, etc!

Irei considerar que já está utilizando a biblioteca em seu projeto, então iremos criar, dentro da pasta src (caso não tenha), uma pasta chamada styles e dentro dela um arquivo chamado global.js.

Sua estrutura de arquivos deve ter ficado algo semelhante a imagem abaixo:

Perfeito! Agora podemos começar a mexer nesse nosso arquivo global.js
A primeira coisa que devemos fazer é importar o GlobalStyle do próprio styled-components para dentro do nosso arquivo:

import { createGlobalStyle } from "styled-components";

Feito isso, podemos então adicionar nossas regras genéricas!

import { createGlobalStyle } from "styled-components";

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box
  }

  body, input, button {
    font: 14px Roboto, sans-serif;
  }

  button {
    cursor: pointer;
  }

  // Adicione quais mais regras desejar!
`;

Legal! Agora temos nosso arquivo feito, mas como usar ele?
Dentro do nosso arquivo App.js (ou o seu arquivo principal, onde você adiciona suas rotas, etc) você irá importar o global e irá adicioná-lo, dentro do return, como se fosse uma tag, um componente novo!

Dessa forma, sua estrutura do App deve ser semelhante a isso:

import React from "react";
import { BrowserRouter } from "react-router-dom";

import GlobalStyle from "./styles/global"; // Arquivo que criamos

import Header from "./components/Header";
import Routes from "./routes";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes />
      // Adicionamos como se fosse uma tag
      <GlobalStyle />
    </BrowserRouter>
  );
}

export default App;

E pronto! Agora temos nosso estilo global funcionando e importado, sem nenhuma dificuldade!

🏡