通过直接访问 DOM 应用 CSS Module 类名

Question

我有一个通过插件使用 CSS 模块的组件babel-plugin-react-css-modules。

在组件生命周期的某些时刻，我希望能够通过直接访问 DOM 来计算它的新维度。

在我的 SCSS 样式表中，我有一个名为的类.full-width，我想将其应用于组件的 DOM 元素，以便进行计算，然后再次将其删除。

现在，由于添加类并稍后删除它不会影响组件或其状态，因此我想通过直接访问 DOM 来添加和删除类，而不是通过某种方式将其与组件的相关联。state。

如果我这样做，则会将this.DOMReference.classList.add('full-width');类full-width添加到其中，但我想添加该类的模块化版本，因为如果我这样做了，它将被应用styleName="full-width"（例如Component__full-width___Pjd10）

.full-width有没有办法在不进行全局声明的情况下做到这一点？

我可以用 来做到这一点吗react-css-modules？

Answer 1

好吧，我意识到我可以导入变量下的样式，而不是匿名，例如

import styles from './styles.scss'而不是import './styles.scss'然后我可以这样使用它

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

我也不必使用styleName="styles.someClass"任何一个，我可以简单地使用styleName="someClass"（只要只导入一个样式表文件，否则你需要像前者一样）