使用 React CSS 模块应用多个 CSS 类的样式

Question

我有一个 React 组件，它使用 onClick 侦听器动态应用 CSS 样式 class。这有效，当我在浏览器检查器中查看生成的 html 时，我可以看到我想要的输出。

<div class="RecipeSection_recipe-section__Asce8 active">
<h2>Ingredients</h2>
</div>

但是我在 React CSS 模块中定义的样式没有应用

.recipe-section.active h2 {
  text-align: center;
  color: red;
}

当我删除 .active class 时，我可以看到应用了红色样式。

我猜是因为 React CSS 模块在名称中添加了一个散列，它影响了 class 连接，但我不确定是否有办法在 React CSS 模块?

Answer 1

样式未被应用的原因是因为我提供了 css 'active' class 作为字符串值而不是作为导入的引用 CSS模块：

import classes from "./RecipeSection.module.css";

那我可以提供参考：

${classes.active}

真正的线索是，在最初生成的 html 中，我的活动 class 没有分配哈希，因为食谱部分 class 有

<div class="RecipeSection_recipe-section__Asce8 active">

Applying style of multiple CSS classes using React CSS Modules