Search code examples
csscss-modules

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

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?

Solution

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

    .hashedClass {
  ...

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