您可以使用 SCSS 模块定位/修改现有类吗?
Posted
技术标签:
【中文标题】您可以使用 SCSS 模块定位/修改现有类吗?【英文标题】:Can you target/ modify existing classes with SCSS Modules? 【发布时间】: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;
You don't need the & there.
Here's a working CodeSandbox.
【讨论】:
以上是关于您可以使用 SCSS 模块定位/修改现有类吗?的主要内容,如果未能解决你的问题,请参考以下文章