Empecé a usar componentes con estilo para mi próxima aplicación js y me preguntaba cómo usar componentes con estilo para estilos globales o si hacerlo. Pensé en compartir eso en formato Q n A.
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
.