如何在CSS Modules中正确嵌套第三方组件的CSS类？

我有如下CSS模块代码：

.someClass {
  background-color: yellow;
}

.someClass .mantine-Checkbox-inner {
  background-color: green;
}

它被CSS Modules转换后变成了这样：

._someClass_whatever {
  background-color: yellow;
}

._mantine-Checkbox-inner_whatever2 {
  background-color: green;
}

但我想要的转换结果是这样的：

._someClass_whatever {
  background-color: yellow;
}

._someClass_whatever .mantine-Checkbox-inner {
  background-color: green;
}

注意：mantine-Checkbox-inner是React组件库自动生成的类名，并非我手动定义。

[编辑] 我发现用属性选择器的写法似乎能实现需求，但这个方案是不是太糟糕了？

.someClass {
  background-color: yellow;
}

.someClass [class~='mantine-Checkbox-inner'] {
  background-color: green;
}

你的属性选择器写法确实可行，但并非最优方案——属性选择器的匹配性能比类选择器差，而且写法不够直观。

CSS Modules本身提供了:global()伪类来标记不需要被哈希转换的类名，这才是处理这类场景的标准做法：

.someClass {
  background-color: yellow;
}

.someClass :global(.mantine-Checkbox-inner) {
  background-color: green;
}

这样转换后就会得到你想要的结果：

._someClass_whatever {
  background-color: yellow;
}

._someClass_whatever .mantine-Checkbox-inner {
  background-color: green;
}

:global()的作用是告诉CSS Modules：括号内的选择器无需进行哈希处理，保留原始类名。这种写法既符合CSS Modules的规范，又清晰直观，性能也优于属性选择器。

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