Appliquer le nom de classe du module CSS en accédant directement au DOM

Question

J'ai un composant qui utilise des modules CSS, au moyen du plugin babel-plugin-react-css-modules.

À certains moments pendant la durée de vie du composant, je veux pouvoir calculer de nouvelles dimensions pour celui-ci, en accédant directement au DOM.

Dans ma feuille de style SCSS, j'ai une classe nommée .full-width que je veux appliquer à l'élément DOM du composant, afin de faire un calcul, puis le supprimer à nouveau. Maintenant, puisque l'ajout de la classe et sa suppression une fraction de seconde plus tard n'affecte pas le composant ou son état, je veux ajouter et supprimer la classe en accédant directement au DOM sans passer par les cerceaux de quelque façon à state du composant.

Si je fais this.DOMReference.classList.add('full-width'); la classe full-width est ajouté, mais je veux ajouter la version modularisé de la classe, car il serait appliqué si je l'ai fait styleName="full-width" (par exemple Component__full-width___Pjd10)

Est-il possible pour ce faire sans faire .full-width une déclaration globale?

Serais-je en mesure de le faire avec react-css-modules?

Answer 1

Eh bien, je réalise que je peux importer les styles sous une variable, au lieu de façon anonyme, par exemple

import styles from './styles.scss' au lieu de import './styles.scss' et je peux l'utiliser comme tel

this.DOMReference.classList.add(styles['full-width']);

J'ai aussi ne doit pas utiliser styleName="styles.someClass" non plus, je peux simplement utiliser styleName="someClass" (tant qu'il n'y a qu'un fichier de feuille de style importé, sinon vous devez le faire comme l'ancien)

Je voudrais entendre de meilleurs moyens de le faire.