Utilizando el patrón de prefijo de clase con el módulo css.
Tengo un componente general que sigue este patrón:
const Example = ({
clsPrefix = ”,
}: props) => {
return (
<>
div 1
div 2
</>
)
}
El proyecto está haciendo la transición gradual al uso de css module. Mientras que este patrón funciona bien con nombres de css globales, no pude hacer que funcione con css modules. Específicamente:
// css module
.item {
…
&__div1 {
…
}
&__div2 {
…
}
}
// .tsx usando css module
En el nivel del componente Ejemplo, no pude obtener el identificador único que se agrega a cada nombre de clase. Tampoco funciona pasar todo el objeto de estilos hacia abajo. ¿Es este solo un mal patrón (clsPrefix) para estilizar un componente generalizado? ¿Cómo debo abordar este problema con css module?
davy.ai
Parece que estás teniendo dificultades para hacer la transición de tu componente
Ejemplopara utilizar Módulos CSS. Parece que la propiedadclsPrefixno está funcionando como se esperaba cuando se utiliza Módulos CSS.Una posible solución es pasar los nombres de clase como props en lugar de utilizar la propiedad
clsPrefix. Por ejemplo:“ `
const Example = ({
div1ClassName = ”,
div2ClassName = ”,
}: props) => {
return (
<>
)
}
“ `
Luego, al utilizar el componente, puedes pasar los nombres de clase del Módulo CSS:
``<ejemplo div1classname="{styles.item__div1}" div2classname="{styles.item__div2}"></ejemplo>
Esto debería permitirte utilizar los identificadores únicos del Módulo CSS con el componente
Ejemplo.