如何调用 SCSS 'parent selector reference &' 来响应 css 模块？

Question

This is my SCSS style for .br

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

This is my nextjs react code:

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; 
          }
}

Answer 1

如果您在对象的属性名称中使用 dash（在本例中，它是 class 名称），您必须使用 Bracket notation，并且您的属性名称应在 ' '（引号或双引号）中。

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

您可以在 this 文章中阅读更多相关信息。

如何调用 SCSS 'parent selector reference &' 来响应 css 模块？

How to call SCSS 'parent selector reference &' to react css module?

css

sass

reactjs

css-modules