在 React 中使用 SASS 子类答案

【问题标题】：Use SASS subclasses in React在 React 中使用 SASS 子类
【发布时间】：2021-01-26 18:53:48
【问题描述】：

我的 SCSS 代码：

.motherClass {
  ...
  .subClass {
    ...
  }
}

我的 TSX 代码：

return <div className={styles.motherClass}>
  <div className={  ???  }>
    ...
  </div>
</div>

为了将subClass 类应用于子 HTML 元素，应该如何进行？

我试过了

className="subClass"
className={styles.motherClass.subClass}

但似乎没有一个工作。有什么办法吗？

（看起来很明显，但出于封装的原因，我不想将子类从母类中逃脱，所以这个解决方案不在桌面上）

【问题讨论】：

【解决方案1】：

className={styles.subClass}

使用 CSS 模块时，在 CSS/SCSS 文件中创建的每个类都可以作为导出对象的属性使用。

嵌套对此没有影响，它只会影响结果选择器。

【讨论】：