您可以使用 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 模块定位/修改现有类吗?的主要内容,如果未能解决你的问题,请参考以下文章

在使用设计模式时,您可以在多大程度上防止修改现有代码?

JAVA中子类能修改父类吗?

如何使用报告向导修改现有SSRS报告

第二单元 反射

C# 反射

hadoop程序可以直接引用java类吗