sass - 您可以使用 SCSS 模块定位/修改现有类吗？

Question

我正在 React 应用程序中将现有的 SCSS 转换为 SCSS 模块，并且在定位外部库(在本例中为 React-datepicker)指定的类时遇到问题。

使用模块将类名更改为 ._DateField-module__react-datepicker__fWQOd 之类的内容，但是有没有任何方法可以定位 DatePicker 样式，或者使用模块这是不可能的吗？

之前的代码

DateField.tsx 只是 DatePicker 的包装:

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

DateField.scss 成功覆盖 DatePicker 组件内的现有样式:

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

Answer 1

您可以使用 :global 切换到相应选择器的全局范围。

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

You don't need the & there.

Here's a working CodeSandbox.