如何修改react-advanced-datetimerange-picker指定区域默认背景色

问题说明 #

• 站点使用react-advanced-datetimerange-picker库实现时间范围选择日历功能
• 自定义CSS修改组件指定区域背景色时，所有常规写法均不生效

失效原因 #

组件库内置样式的选择器权重更高，若自定义样式引入顺序早于库样式、或者写在CSS Modules局部作用域内，会被默认样式覆盖。

可生效样式代码 #

将以下代码添加到项目全局CSS文件，保证该CSS引入顺序在组件库默认样式之后，替换色值为目标颜色即可：

.react-advanced-datetimerange-picker .rdrDateDisplayWrapper {
  background-color: 替换为你的目标色值 !important;
}

如果项目使用CSS Modules，需要通过全局作用域声明选择器，写法如下：

:global(.react-advanced-datetimerange-picker) .rdrDateDisplayWrapper {
  background-color: 替换为你的目标色值 !important;
}

补充说明 #

如果上述选择器没有匹配到你要修改的区域，直接通过浏览器开发者工具复制目标DOM节点的类名，替换代码中的.rdrDateDisplayWrapper即可。必须保留前缀的组件根类名.react-advanced-datetimerange-picker来提升选择器权重，末尾的!important为兜底配置，可避免被库内置的高优先级样式压制。

内容的提问来源于stack exchange，提问作者Paul