GOOGLE ADS

viernes, 22 de abril de 2022

Aplique el nombre de clase del módulo CSS accediendo directamente al DOM

Tengo un componente que hace uso de CSS-Modules, por medio del babel-plugin-react-css-modulescomplemento.

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-widthque 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-widthuna 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

Flutter: error de rango al acceder a la respuesta JSON

Estoy accediendo a una respuesta JSON con la siguiente estructura. { "fullName": "FirstName LastName", "listings...