如何在CSS模块中正确嵌套CSS类？

Question

假设我有以下 CSS 模块：

.someClass {
  background-color: yellow;
}

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

这将转换为类似的内容：

._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;
}

我怎样才能实现这个目标？
请注意，我不会自己设置CSS类

mantine-Checkbox-inner

，它将由React组件库设置。

[编辑] 似乎这样的方法有效，但这个解决方案很糟糕，不是吗？

.someClass {
  background-color: yellow;
}

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

Answer 1

哦，其实很简单。
这应该可以解决问题：

.someClass {
  background-color: yellow;
}

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