No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Martínez

Diana Martínez

CSS Modules

8/19
Recursos

Aportes 2

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Una manera de usarlo en React es:

CSS o SCSS Modules

El objetivo de esto es conseguir que el CSS que declaremos sea relativo y único hacia el componente que lo estamos importando.

¿Cómo hacer que una clase de CSS sea única, dándole un nombre único y diferente? se consigue con modules CSS que apoyado en un bundle permite generar un identificador único para cada clase del CSS

A nuestros archivos de CSS debemos agregarle un .module.css

NombreComponente.module.css

Sin embargo también la manera de importarlos y usarlos en nuestro componentes sera diferente

import style from './NombreComponente.module.css'

function NombreComponente({ todos }) {
	return (
		<div className={stlye.container}>
			<p>Content</p>
		</div>
	);
}

export { NombreComponente};

Si queremos usar más dos clases para una solo etiqueta podemos usar template Strings o template literals, respetando el espacio en medio que tienen dichas clases

div className={`${stlye.container} ${stlye.margin}`}>

No olvidemos usar el normalize o un reset de CSS ya que todos los navegadores tienen diferentes márgenes por lo cual nuestro CSS pueden llegar a colapsar.

Requerimientos:

  1. Nuestro archivo a importar debe terminar en .module.css(scss): ejemplo.module.css
  2. Los module CSS se pueden importar como si fueran otra librería. El archivo button.module.css (ejemplo abajo) solo tiene una clase ‘btn’. al importar el módulo la variable buttonStyles almacenará un objeto con las classes del archivo como propiedades del objeto cuyo valores serán los nombres autogenerados a los que podemos hacer referencia en nuestro html.
  3. Agregamos esta clase a nuestro código.
import buttonStyles from './button.module.css'

document.querySelector('#app').innerHTML = `
<h1> Hello PLatzi! </h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Hola</a>
<button id="btn" class="${buttonStyles.btn}">Button</button> 
`

//otra forma
document.getElementById('btn').className = buttonStyles.btn