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

【问题标题】：Apply CSS Module class name by directly accessing the DOM通过直接访问 DOM 应用 CSS Module 类名
【发布时间】：2018-02-19 20:11:25
【问题描述】：

我有一个使用 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 做到这一点吗？

【问题讨论】：

标签： css reactjs css-modules react-css-modules babel-plugin-react-css-modules

【解决方案1】：

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

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

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

styleName="styles.someClass"我也用不着，styleName="someClass"就可以了（只要导入的样式表文件只有一个，否则就按前者）

【讨论】：