如何在哈希后的CSS Module类中使用选择器组合器覆盖第三方组件样式

在自定义组件中使用react-datepicker第三方组件时，需要通过选择器组合器定位目标元素来覆盖其样式，但CSS Module会给自定义类名添加动态哈希，导致组合器失效。

我的原始CSS代码如下：

.dateContainer {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 1em;
  width: 100%;
}

.dateContainer .react-datepicker-wrapper {
  display: block;
}

编译后.dateContainer会被转为带哈希的类名（例如dateContainer_xyz789），导致.dateContainer .react-datepicker-wrapper选择器无法匹配到目标元素。我也曾尝试使用属性选择器，但未达到预期效果：

div[class*="dateContainer"] .react-datepicker-wrapper {
 display: block;
}

我的需求是让日期字段完全填满容器，手动将.react-datepicker-wrapper的display: inline-block改为block即可实现该效果。

解决方案 #

使用CSS Module提供的:global()伪类，将第三方组件的类名标记为全局选择器，避免被哈希处理：

.dateContainer {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 1em;
  width: 100%;
}

.dateContainer :global(.react-datepicker-wrapper) {
  display: block;
}

这样编译后，.dateContainer会被正常哈希，而:global()内部的.react-datepicker-wrapper保持原样，选择器组合器就能正确匹配到目标元素，实现日期字段填满容器的效果。

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