CSS global e Styled-Components em um projeto Next.js

Olá, seja muito bem vindo(a), anteriormente nós demos estilo ao nosso cabeçalho usando styled-jsx que é uma forma nativa de escrever css-in-js do Nextjs: https://programacao-descomplicada.blogspot.com/2022/11/css-in-js-aplicando-estilos-dentro-do.html, agora nós vamos construir nosso CSS global, e dessa vez vamos utilizar o Styled-Components.

  Primeiramente vamos efetuar a instalação no nosso projeto abrindo o terminal dentro da pasta principal e digitando o seguinte comando: npm install --save styled-components. Na pasta principal do projeto eu criei uma pasta chamada public e dentro criei outra pasta chamada css para adicionar o arquivo Global-CSS.js dentro dele.

  Dentro da nossa pasta pages vamos adicionar um arquivo chamado _app.js e colar o seguinte código nele:

export default function MyApp({ Component, pageProps }) {

 return (

<>

 <Component {...pageProps} />

</>

 )

}

  Agora, voltando ao nosso Global-CSS.js vamos começar importando o createGlobalStyle do styled-components. Abaixo vamos criar uma constante para exportação e passar o nosso código reset que estava no componente de cabeçalho.

import { createGlobalStyle } from 'styled-components';



const GlobalCSS = createGlobalStyle`

* {

 padding: 0;

 margin: 0;

 text-decoration: none;

 box-sizing: border-box;

}

`;



export default GlobalCSS;

  Agora, voltando ao _app.js vamos importar esse arquivo e passar acima da tag de componente para que ele funcione, da seguinte forma:

import GlobalCSS from "../public/css/Global-CSS.js"



export default function MyApp({ Component, pageProps }) {

 return (

<>

 <GlobalCSS />

 <Component {...pageProps} />

</>

 )

}

  Agora podemos importar a nossa fonte do projeto anterior e ainda colocar nosso código da barra lateral lá dentro para que isso fique visível em todo o projeto. Outro ponto seria passar os componentes de cabeçalho e rodapé ali no arquivo _app.js para ele ficar global em todas as páginas, mas vemos isso depois. Um abraço e até a próxima.

Artigo Original: https://programacao-descomplicada.blogspot.com/2022/11/css-global-e-styled-components-em-um.html