Estilos CSS de Next.js
En Next.js, el uso de estilos es muy flexible; podemos elegir múltiples formas de agregar estilos a tu aplicación.
Estilos globales
Los estilos globales son estilos CSS que afectan a toda la aplicación. Generalmente se utilizan para establecer los estilos base de la página, como fuentes, colores, diseño, etc.
Next.js introduce archivos CSS globales a través de app/layout.tsx.
De forma predeterminada, el directorio app ya tiene estilos globalesglobals.cssarchivo. Si no existe, también puedes crear un nuevo archivo CSS.
Crea un archivo en el directorio stylesglobals.cssy luego impórtalo en app/layout.tsx.
Código del archivo app/globals.css:
body {
padding: 20px 20px 60px;
max-width: 680px;
font-size:64px;
margin: 0 auto;
background-color: #F5F5FB;
color: #333;
}
Luego, importa este archivo en el diseño raíz (app/layout.tsx) para aplicar los estilos a cada ruta de la aplicación:
Código del archivo app/layout.tsx:
// Estos estilos se aplicarán a cada ruta de la aplicación
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>{children}</body>
</html>
)
}
Notas:Los estilos globales se pueden importar en cualquier diseño, página o componente dentro del directorio app. Sin embargo, dado que Next.js utiliza el soporte integrado de hojas de estilo de React para integrarse con Suspense, el soporte integrado actual no elimina las hojas de estilo al navegar entre rutas. Por lo tanto, recomendamos usar los estilos globales para CSS verdaderamente global, y los Módulos CSS para CSS con ámbito.
El código de app/page.tsx es el siguiente:
Ejemplo
return <div>Hello, Ejemplo!</div>;
}
Accede a http://localhost:3000/ y comprueba que el resultado se muestra de la siguiente manera:
Sass
Next.js también es compatible con Sass, un preprocesador de CSS con más funciones.
Si prefieres usar Sass para escribir estilos, puedes habilitar Sass instalando las dependencias correspondientes. El contenido se puede consultar enTutorial de Sass。
Instalación:
npm install sass
Next.js se integra con Sass y admite las extensiones y sintaxis .scss y .sass.
También puedes usar Sass a nivel de componente mediante Módulos CSS, con la extensión .module.scss o .module.sass.
Configuración personalizada de Sass
Si deseas configurar las opciones de Sass, puedes usar la opción sassOptions en next.config.js.
Ejemplo
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
sassOptions: {
additionalData: `$var: red;`, // Inyecta automáticamente estos estilos en cada archivo Sass
},
}
export default nextConfig
De esta manera, puedes configurar algunos datos predeterminados de Sass o realizar otros ajustes personalizados.
Crea un archivo SCSS, como styles/Button.module.scss:
Ejemplo
.button {
padding: 10px 20px;
background-color: #0070f3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
Usa módulos SCSS en el componente:
Ejemplo
import styles from '../styles/Button.module.scss';
export default function Button() {
return <button className={styles.button}>Click Me</button>;
}