如何在哈希的CSS模块类上使用选择器组合子？

nxagd54h 于 12个月前发布在其他

关注(0)|答案(1)|浏览(113)

我有一个CSS模块，我需要覆盖我在自己的自定义组件中使用的third-party datepicker component的样式，这涉及到使用选择器组合子来定位正确的元素。问题是，当我使用CSS模块时，类名现在是动态创建的，所以选择器组合不起作用，因为类名被更改了（至少我相信这是问题所在？）。
这是codesandbox中的working example（如果你在一个较小的屏幕上，在一个新的标签中启动应用程序，而不是停靠在侧边栏上）。

CSS

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

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

字符串

HTML类名最终看起来像什么：

我也尝试使用一个属性选择器：

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

型
我试图解决的问题是让这个日期字段完全填充div。当我在浏览器中检查HTML并在div上取消选中.react-datepicker-wrapper类的display: inline-block时，它会做我想要它做的事情。
目前看起来像这样：

我希望它看起来像这样：

css

来源：https://stackoverflow.com/questions/77748960/how-do-you-use-selector-combinators-on-css-module-classes-that-are-hashed

1条答案

按热度按时间

j1dl9f461#

问题是，当我使用CSS模块时，类名现在是动态创建的，所以选择器组合不起作用，因为类名被更改了（至少我认为这是问题所在？）。
是的，这就是问题所在，但是你有向后的修复方法- * 你的CSS* 正在被重写，以针对重命名的类，这些类将成为你组件的一部分。请注意，你的规则针对的类不是:global模块的作用域：

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

字符串
即使你的日期容器不太可能包含任何其他组件，最好的做法是具体化，所以使用子组合符：

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

型

赞(0）回复(0）举报 12个月前

我来回答

如何在哈希的CSS模块类上使用选择器组合子？

1条答案

相关问题

热门标签

最新问答