如何在React CSS Module中调用SCSS父选择器&生成的修饰类名？

你编写的SCSS中&--red编译后会生成标准的.br--red类名，在CSS Modules导出的样式对象中可以按以下方式访问：

方法1：方括号语法直接访问 #

因为类名包含短横线，无法直接用点操作符调用，使用方括号传入完整类名字符串即可：

// 仅使用.br--red类
<div className={layout['br--red']}>
  <h1>Khan</h1>
</div>

// 同时使用基础.br类和.br--red修饰类
<div className={`${layout.br} ${layout['br--red']}`}>
  <h1>Khan</h1>
</div>

方法2：驼峰形式访问 #

如果你的项目配置了CSS Modules自动转换短横线命名为驼峰（Next.js等框架默认开启该配置），也可以用驼峰形式调用：

<div className={`${layout.br} ${layout.brRed}`}>
  <h1>Khan</h1>
</div>

方法3：使用classnames工具简化多类拼接 #

如果需要频繁拼接多个类、或者需要条件加载类，推荐使用classnames工具库简化写法：

// 先安装classnames：npm install classnames
import cx from 'classnames'
import layout from "../styles/layout.module.scss";

export default function Index() {
  const isRed = true // 可以替换为你的业务判断条件
  return (
      <div className={cx(layout.br, { [layout['br--red']]: isRed })}>
        <h1>Khan</h1>
      </div>
  );
}

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