散列后如何定位 CSS 模块 类？

How to target CSS module classes after they are hashed?

我正在使用 React 并有一个使用 CSS 模块进行样式设置的元素，如下所示：

<div className={styles.book__title}>Title: {book.title}</div>

因为 class 名称是散列的，编译后的输出类似于：

<div class="book__title_adsfj4">Title: The Lord of the Rings</div>

我在按钮上添加了一个事件侦听器，当按下该按钮时，会将 'title' class 添加到此元素，以便为该特定 class 提供额外的样式，就像这样:

<div class="book__title_adsfj4 title">Title: The Lord of the Rings</div>

有什么方法可以：

  1. 将 class 附加到一个元素，并且在我的 css 文件中没有 class 被散列或
  2. 向与最终编译的哈希名称完全匹配的元素添加class？

谢谢。

我在这里写了我找到的最好的方法 - https://github.com/css-modules/css-modules/issues/199

基本上，它只是从原始 css 文件中导入那些样式。因为这些样式的哈希值都是相同的，所以无论它们是否在不同的文件中导入，样式都会沿用。

当您有某种事件触发元素的永久视觉变化时，这意味着您的元素具有状态！你会想在 React 中使用状态来处理这种变化。

在 React 中，状态是组件上的字典，每当它发生变化时，都会触发该组件的重新渲染。你可以在这里阅读状态：https://reactjs.org/docs/state-and-lifecycle.html

你要做的是在你的状态中添加一个变量，比如 'buttonPressed'（或者你想称呼该事件或状态的任何东西），并将其设置为 true 或 false，具体取决于on 如果你想让 class 在那里。按下按钮时，您将调用 this.setState 修改 state 中的变量并触发重新渲染。

然后，在您的渲染函数中，您只需检查该变量在您的状态下是什么，并包含或不包含 class，如下所示：

<div className={styles.book__title + " " + this.state.buttonPressed ? styles.title : ""}>Title: {book.title}</div>