通过直接访问DOM应用CSS模块类名称

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"（只要只导入一个样式表文件，否则你需要像前一样做）

我想听听任何更好的方法来做到这一点。