Search code examples
sasscss-selectorscss-modulesreact-css-modules

Can you target/ modify existing classes with SCSS Modules?


I'm converting existing SCSS to SCSS Modules in a React app, and I'm having issues targeting classes specified by an external library (react-datepicker in this case).

Using modules changes the classname to something like ._DateField-module__react-datepicker__fWQOd, but is there any way of targeting the DatePicker styles or is this not possible using modules?

Previous Code

DateField.tsx is just a wrapper for DatePicker:

<div className='date-field'>
  <DatePicker/>
</div>

DateField.scss successfully overrides existing styles inside the DatePicker component:

.date-field {
...
...
  & .react-datepicker {
    background-color: $dark-grey;
    color: $white;
  }
}

Solution

  • You can use :global to switch to global scope for the respective selector.

    .date-field {
    ...
    ...
      :global .react-datepicker {
        background-color: $dark-grey;
        color: $white;
      }
    }
    

    You don't need the & there.

    Here's a working CodeSandbox.