如何覆盖使用 vanilla-extract globalStyle 指定的样式？

Question

我正在开发一个 React 应用程序，并且有一个影响主体内所有元素的 CSS 样式配置。但是，我想添加一个新组件，但不应用此样式。有什么方法可以防止这种全局样式只影响该组件吗？

globalStyle('body', {
  WebkitFontSmoothing: 'antialiased',
});

我尝试过一些努力但没有用：

1. 定义一个新的全局样式，通过 className 来定位组件，使其具有 WebkitFontSmoothing: 'never'

2. globalStyle('body:not(.testing)', { WebkitFontSmoothing: '抗锯齿', MozOsxFontSmoothing: '灰度'});

3. 使用自定义CSS！重要

Answer 1

如果你想获得一个不受全局CSS影响的独立CSS环境，ShadowRoot可能是一个普通的解决方案。

通过 react-shadow-root

在 React 中使用 ShadowRoot 很容易

更多示例 👉 Shadow DOM 和 ReactJS