How to properly nest CSS classes in CSS modules? [duplicate]

Question

Let's say I have the following CSS module:

.someClass {
  background-color: yellow;
}

.someClass .mantine-Checkbox-inner {
  background-color: green;
}

This will be converted to something like:

._someClass_whatever {
  background-color: yellow;
}

._mantine-Checkbox-inner_whatever2 {
  background-color: green;
}

But what I want is something like:

._someClass_whatever {
  background-color: yellow;
}

._someClass_whatever .mantine-Checkbox-inner {
  background-color: green;
}

How can I achieve this?
Please be aware that I will not set CSS class mantine-Checkbox-inner by myself, it will be set by a React component library.

[EDIT] It seems that something like this is working, but this solution is awful, isn't it?

.someClass {
  background-color: yellow;
}

.someClass [class~='mantine-Checkbox-inner'] {
  background-color: green;
}

Natasha · Accepted Answer · 2024-05-10 16:51:07Z

0

Oh, it's actually quite simple.
This should do the trick:

.someClass {
  background-color: yellow;
}

.someClass :global(.mantine-Checkbox-inner) {
  background-color: green;
}

And this should work in modern browsers:

.someClass {
  background-color: yellow;

  :global(.mantine-Checkbox-inner) {
    background-color: green;
  }
}

answered May 10, 2024 at 16:51

Natasha

90615 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

How to properly nest CSS classes in CSS modules? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related