如何调用 SCSS '父选择器参考 &' 来响应 css 模块？答案

【问题标题】：How to call SCSS 'parent selector reference &' to react css module?如何调用 SCSS '父选择器参考 &' 来响应 css 模块？
【发布时间】：2021-11-14 00:34:37
【问题描述】：

这是我的 .br 的 SCSS 样式

 .br {
          &--red {
            border: 2px solid red;
          }
          &--green {
            border: 2px solid rgb(32, 170, 8);
          }
        }

这是我的 nextjs 反应代码：

import layout from "../styles/layout.module.scss";

export default function Index() {
  return (
      <div className={layout.br}>
        <h1>Khan</h1>
      </div>
  );
}

如何在 jsx 中访问这个“.br--red”？

.br{ 
    &--red{
        border:2px solid red; 
          }
}

【问题讨论】：

这能回答你的问题吗？ How do I reference a JavaScript object property with a hyphen in it?

标签： css reactjs sass css-modules

【解决方案1】：

如果你在对象的属性名中使用dash（在这种情况下，它是类名），使用它你必须使用Bracket notation，并且你的属性名应该在' '（引号或双-引用）。

<div className={layout['br--red']}>
    <h1>Khan</h1>
</div>

您可以在this 文章中了解更多信息。

【讨论】：