¿Cómo dar estilo a los componentes React en Next.js?
¿Cómo damos estilo a los componentes React en Next.js?
Tenemos mucha libertad, porque podemos utilizar la biblioteca que preferimos.
Pero Next.js viene styled-jsx
incorporado, porque es una biblioteca creada por las mismas personas que trabajan en Next.js.
Y es una biblioteca bastante interesante que nos proporciona CSS con alcance, lo cual es excelente para el mantenimiento porque el CSS solo afecta al componente al que se aplica.
Creo que este es un gran enfoque para escribir CSS, sin la necesidad de aplicar bibliotecas adicionales o preprocesadores que agreguen complejidad.
Para agregar CSS a un componente React en Next.js lo insertamos dentro de un fragmento en el JSX, que comienza con
style jsx{`
y termina con
`}/style
Dentro de estos bloques extraños escribimos CSS simple, como lo haríamos en un .css
archivo:
style jsx{` h1 { font-size: 3rem; }`}/style
Lo escribe dentro del JSX, así:
const Index = () = ( divh1Home page/h1style jsx{` h1 { font-size: 3rem; }`}/style /div)export default Index
Dentro del bloque podemos usar la interpolación para cambiar dinámicamente los valores. Por ejemplo, aquí asumimos que size
el componente padre pasa una propiedad y la usamos en el styled-jsx
bloque: Filtros de Agua
const Index = props = ( divh1Home page/h1style jsx{` h1 { font-size: ${props.size}rem; }`}/style /div)
Si desea aplicar algún CSS de forma global, sin limitarse a un componente, agregue la global
palabra clave a la style
etiqueta:
style jsx global{`body { margin: 0;}`}/style
Si desea importar un archivo CSS externo en un componente Next.js, primero debe instalar @zeit/next-css
:
npm install @zeit/next-css
y luego crear un archivo de configuración en la raíz del proyecto, llamado next.config.js
, con este contenido:
const withCSS = require('@zeit/next-css')module.exports = withCSS()
Después de reiniciar la aplicación Next, ahora puedes importar CSS como lo haces normalmente con las bibliotecas o componentes de JavaScript:
import '../style.css'
También puedes importar un archivo SASS directamente, utilizando la @zeit/next-sass
biblioteca.
Tips de Next.js (enrutador de páginas)
Tal vez te puede interesar:
Dar estilo a los componentes de Next.js mediante CSS
¿Cómo damos estilo a los componentes React en Next.js? ¿Cómo dar estilo a los componentes React en Next.js? ¿Cómo dar estilo a los componentes React en N
programar
es
https://aprendeprogramando.es/static/images/programar-dar-estilo-a-los-componentes-de-next-2199-0.jpg
2024-11-03
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente