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

【问题标题】：Can you target/ modify existing classes with SCSS Modules?您可以使用 SCSS 模块定位/修改现有类吗？
【发布时间】：2021-09-22 15:35:03
【问题描述】：

我正在将现有的 SCSS 转换为 React 应用程序中的 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;
  }
}

【问题讨论】：

【解决方案1】：

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

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

【讨论】：