React组件如何动态应用SCSS模块中的嵌套类？

1. SCSS模块的类导出规则 #

SCSS CSS Modules只会暴露顶级的类选择器到导出的style对象中，你现在的.success是嵌套在.announcement内部的后代选择器，属于父类的内部样式规则，不会被单独导出为style.success，所以JS里的style[type]实际上拿到的是undefined。

2. 样式选择器与DOM结构不匹配 #

就算能拿到.success的类名，你当前的SCSS规则.announcement .success是后代选择器，它要求.success是.announcement的子元素，但你的组件是把两个类加在同一个<div>上，这种结构匹配的是并列类选择器（.announcement.success），而非后代选择器，所以样式根本不会生效。

用SCSS的&父选择器，把嵌套的后代选择器改成并列类选择器，这样既不用拆分嵌套结构，又能让类名被模块正常导出：

修改Announcement.module.scss：

@import 'variables';

.announcement {
  width: 100%;
  padding: 1.5rem;
  color: $announcement;
  min-height: 15rem;

  // 用&指代当前父选择器.announcement，生成.announcement.success的并列类规则
  &.success {
    background-color: $lightgreen;
  }
}

这样处理后：

• SCSS模块会把.success作为顶级类导出到style对象中，JS里的style[type]能正确拿到对应的局部类名
• 编译后的样式规则是.announcement[局部后缀].success[局部后缀]，和你组件中同一个div上的两个类完全匹配，样式就能正常生效了

内容的提问来源于stack exchange，提问作者Eva Bucur