How do you use selector combinators on CSS module classes that are hashed?

Issue

I have a CSS module where I need to override a style from a third-party datepicker component that I use in my own custom component, this involves using a selector combinator to target the right element. The problem is that when I use a CSS module, the class name is now dynamically created, so the selector combination doesn't work since the class name is changed (at least I believe that's the problem?).

Here is a working example in codesandbox (launch the app in a new tab instead of docked on the sidebar if you're on a smaller screen).

CSS

.dateContainer {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 1em;
  width: 100%;
}

.dateContainer .react-datepicker-wrapper {
  display: block;
}

What the HTML class name ends up looking like:

I've also tried to use an attribute selector:

div[class*="dateContainer"] .react-datepicker-wrapper {
 display: block;
}

The problem that I'm trying to solve is getting this date field to fully fill the div. When I go inspect the HTML in the browser and uncheck display: inline-block on the div with the .react-datepicker-wrapper class, it does what I want it to do.

Currently looks like this:

I want it to look like this:

Solution

The problem is that when I use a CSS module, the class name is now dynamically created, so the selector combination doesn't work since the class name is changed (at least I believe that's the problem?).

Yes, that’s the problem, but you have the fix backwards – your CSS is being rewritten to target the renamed classes that would be part of your component. Indicate that your rule targets a class not scoped to your module with :global:

.dateContainer :global(.react-datepicker-wrapper) {
  display: block;
}

And even though it’s unlikely that your date container will contain any other components, it’s best practice to be specific, so use the child combinator:

.dateContainer > :global(.react-datepicker-wrapper) {
  display: block;
}

Answered By - Ry-