Sebastian Gomez
En este artículo, aprenderás cómo utilizar Theme UI, una librería que te permite crear objetos con un tema de CSS (colores, variables, estilos, etc.) y usarlos en tus componentes de Next.js. Además, te enseñaré cómo manejar el scope de los estilos e inyectar el CSS en tu aplicación.
📦 InstalaciónPrimero, instala los paquetes necesarios y, por supuesto, Theme UI:
npm i theme-ui @theme-ui/presets --save
ó
yarn add theme-ui @theme-ui/presets
🎨 Creación del temaEjemplo de theme.js:
import { roboto } from '@theme-ui/presets'const theme = {
...roboto,
containers: {
// Estilos de los contenedores
},
styles: {
...roboto.styles
}
}
export default theme
🧩 Creación de componentesCrea componentes para tu aplicación, como un componente de navegación. Asegúrate de importar jsx de theme-ui.
Ejemplo de nav.jsx:
/** @jsx jsx */import { jsx } from 'theme-ui'import Link from 'next/link'const Nav = () => (
// Estilos y estructura de la navegación
)
export default Nav
Utiliza la propiedad sx en tus componentes para escribir CSS directamente en ellos (Inline CSS) y aplicar estilos desde tu objeto de tema.
📄 Aplicación en páginasAquí hay dos ejemplos de cómo aplicar Theme UI en tus páginas:
// pages/index.jsx/** @jsx jsx */import { jsx } from 'theme-ui'import Link from 'next/link'export default () => (
// Estilos y estructura de la página principal
)
// pages/notes/index.jsx/** @jsx jsx */import { jsx } from 'theme-ui'import Link from 'next/link'export default () => {
// Estilos y estructura de la página de notas
}
🌐 Encapsulando la aplicaciónEncapsula toda tu aplicación dentro de tu tema, utilizando el componente ThemeProvider de Theme UI. Modifica el archivo pages/_app.jsx:
/** @jsx jsx */import { jsx } from 'theme-ui'import { ThemeProvider } from 'theme-ui'import theme from '../theme'import Nav from '../src/components/nav'export default function App({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}><div><Nav /><Component {...pageProps} /></div></ThemeProvider>
)
}
✅ ConclusionesTheme UI es una herramienta muy útil y potente, pero también tiene muchas funcionalidades y puede ser muy profundo. En este post, solo cubrimos lo fundamental para usarlo en tus aplicaciones de Next.js. Sin embargo, el concepto es el mismo para tus aplicaciones de React.js.
Espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente o que simplemente te haya ayudado a entender cómo funciona Theme UI y cómo aplicarlo exitosamente a tus proyectos de Next.js.
Si tienes alguna pregunta, opinión o deseas agregar algo, no dudes en dejar un comentario en la parte de abajo. Si te gustó este artículo, compártelo usando los enlaces a las redes sociales que se encuentran al final.
Creador de contenido principalmente acerca de tecnología.