Para crear estilos globales podemos usar la función createGlobalStyle . Para el proyecto next.js , puede hacerlo en el archivo _app.js o _app.tsx , dependiendo de si está usando mecanografiado.

 import type { AppProps } from "next/app"; import { createGlobalStyle } from "styled-components"; import Header from "@/components/Header"; const GlobalStyles = createGlobalStyle` html, body { padding: 0; margin: 0; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; } `; export default function MyApp({ Component, pageProps }: AppProps) { return ( <> <GlobalStyles /> <Header></Header> <Component {...pageProps} /> </> ); }

Por supuesto, si tiene más estilos globales, puede exportar GlobalStyles desde otro archivo, digamos globalStyle.js .

Pero entonces no hay nada que le impida usar CSS o SCSS para sus estilos globales . Siempre puede importar el .css o .scss o cualquier otro tipo de archivo de preprocesador CSS compatible como lo haría normalmente.

 import '@/styles/global.scss'

Y esto también funcionaría perfectamente bien con sus componentes con estilo. Aunque hay una pequeña ventaja que obtienes al usar createGlobalStyle . Puede usar todas las funciones de SCSS sin tener que agregar la dependencia de SCSS en su proyecto. Y un pequeño inconveniente es que las funciones de autocompletar del ide no funcionan tan bien con los componentes con estilo como lo hacen con los archivos .css y .scss .