问题描述
我正在 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;
}
}
解决方法
您可以使用 :global 切换到相应选择器的全局范围。
.date-field {
...
...
:global .react-datepicker {
background-color: $dark-grey;
color: $white;
}
}