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

Does this answer your question? [How do I reference a JavaScript object property with a hyphen in it?](https://stackoverflow.com/questions/7122609/how-do-i-reference-a-javascript-object-property-with-a-hyphen-in-it) — juliomalves, Nov 15 '21 at 23:06

score 2 · Accepted Answer · answered Nov 13 '21 at 16:34

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.

score 0 · Answer 2 · answered Feb 01 '23 at 14:30

0

Adding on the comment above, you can also use dynamic variable in the brackets like so using backticks.

className={styles[`br--${color}`]}

answered Feb 01 '23 at 14:30

Im24n

61
1
3

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

2 Answers2