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

Question

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

在组件生命周期的某些时候，我希望能够通过直接访问 DOM 来为其计算新尺寸。

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

现在，由于添加 class 并在几分之一秒后删除它不会影响组件或其状态，我想通过直接访问 class 添加和删除 DOM 而不是通过某种方式将它与组件的 state.

相关联

如果我这样做 this.DOMReference.classList.add('full-width');，class full-width 会添加到其中，但我想添加 class 的模块化版本，因为它将被应用如果我做了 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"就可以了（只要导入的样式表文件只有一个即可，否则就照前者一样)

Answer 2

在Next.js

中使用

如果你使用 Next.js 就完美了。

导入CSS模块

import styles from './styles.module.css'

关于你的功能

element.classList.add(styles['full-width'])

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

Apply CSS Module class name by directly accessing the DOM

css

reactjs

css-modules

react-css-modules

babel-plugin-react-css-modules