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

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

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

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

Answer 1

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.