Tengo un componente que hace uso de CSS-Modules, por medio del babel-plugin-react-css-modules
complemento.
En algunos puntos durante la vida útil del componente, quiero poder calcular nuevas dimensiones para él, accediendo directamente al DOM.
En mi hoja de estilo SCSS, tengo una clase con el nombre .full-width
que quiero aplicar al elemento DOM del componente para hacer un cálculo y luego eliminarlo nuevamente.
Ahora, dado que agregar la clase y eliminarla una fracción de segundo más tarde no afecta el componente o su estado, quiero agregar y eliminar la clase accediendo directamente al DOM y no pasar por los aros de relacionarlo de alguna manera con el componente. state
.
Si lo hago, se le agrega this.DOMReference.classList.add('full-width');
la clase full-width
, pero quiero agregar la versión modularizada de la clase, como se aplicaría si lo hiciera styleName="full-width"
(por ejemplo Component__full-width___Pjd10
)
¿Hay alguna manera de hacer esto sin hacer .full-width
una declaración global?
¿Sería capaz de hacer esto con react-css-modules
?
Solución del problema
Bueno, me di cuenta de que puedo importar los estilos bajo una variable, en lugar de hacerlo de forma anónima, por ejemplo.
import styles from './styles.scss'
en lugar de import './styles.scss'
y luego puedo usarlo como tal
this.DOMReference.classList.add(styles['full-width']);
Tampoco tengo que usar styleName="styles.someClass"
ninguno, simplemente puedo usar styleName="someClass"
(siempre que solo haya un archivo de hoja de estilo importado, de lo contrario, debe hacerlo como el primero)
No hay comentarios.:
Publicar un comentario