How to style not-hashed class in css modules file?

Question

I'm using css modules and I have a React component with two classes:

• one - hashed with css modules
• another one - not hashed because it is coming from another function (let's say it is "clear-class").

<div className={`${styles.hashedClass} clear-class`}>
   qwerty
</div>

my scss file looks like this and it is not working.

.hashedClass {
  ...

  &.clear-class {
    background-color: green;
  }
}

when I looked into the source with dev tools I noticed clear-class is getting hashed too.

Is there a way to mark in scss file that I want to apply styling to not hashed class?

Answer 1

Use :global() selector in class you don't want to hash

.hashedClass {
  ...

  & :global(.clear-class) {
    background-color: green;
  }
}