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

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

How to access this ".br--red" in jsx?

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

CodePudding user response：

If you use dash in an object's properties name(in this case, it's class name), for use of it you must use Bracket notation, and your property name should be in ' '(quotation or double-quotation).

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

You can read more about it in this article.