Non-generated classname selector in css module

Question

Let's say we have a third-party CardComponent like this

<Card title="This is a title in the header">This is text in the body</Card>

And this renders in plain HTML

<div class="Card">
  <div class="CardHeader"></div>
  <div class="CardBody"></div>
</div>

And I'm using css modules for styling (scss in this case).

.customCard {
  .CardBody {
    color: red;
  }
}

And then add the class to Card

import styles from ...
...
<Card className={styles.customCard} ...>...</Card>

Above will not work because it creates a generated class for CardBody like CardBody_sjkdh43. Is there a way to select non generated classnames in modules? Or is this only possible in the old fashion way to use a stylesheet?

Demo SandBox

It seems you can only access customCard class which we pass as props nothing else :) — Pritesh
– Pritesh, Commented Jul 23, 2020 at 11:25

TylerH · Accepted Answer · 2023-08-23 18:36:01Z

21

The answer is to use the :global() selector in CSS modules.

For more info: Exceptions - CSS Modules

Example the code:

<div class={styles.myClass}>
    <SomeComponentWithOwnCss />
</div>

Output:

<div class="myClass_s4jkdh3">
    <div class="SomeComponentWithOwnCss"></div>
</div>

And CSS:

.myClass div:global(.SomeComponentWithOwnCss) {
    background-color: red;
}

Working example here: codesandbox

edited Aug 23, 2023 at 18:36

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Jul 29, 2021 at 9:40

Closery

99611 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iharob Al Asimi Over a year ago

Nice. Simple and clear. Pretty straight forward. Thank you so much.

TylerH · Accepted Answer · 2023-08-23 18:36:06Z

1

You could try this for a more convenient approach with SCSS:

.parent :global {
  .non-cssmodule-class {
    color: red;
  }
}

<div className={styles.parent}>
  <div className="non-cssmodule-class" />
</div>

output:

<style>
  .filename-parent__7MR41 .non-cssmodule-class { color: red; }
</style>
<div class="filename-parent__7MR41">
    <div class="non-cssmodule-class"></div>
</div>

edited Aug 23, 2023 at 18:36

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Nov 25, 2022 at 21:06

Ryan Norooz

1,7031 gold badge15 silver badges11 bronze badges

Collectives™ on Stack Overflow

Non-generated classname selector in css module

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related