How can I overwrite the styling that is specified using vanilla-extract globalStyle?

Question

I am working on a React app and have a CSS style configuration that affects all elements within the body. However, I have a new component that I want to add without applying this styling to it. Is there any way I can prevent this global style from affecting just that component?

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

Some efforts I have tried but no use:

1. Define a new globalStyle that targeting the component by className to have WebkitFontSmoothing: 'never'

2. globalStyle('body:not(.testing)', { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale'});

3. use custom css !important

Answer 1

If you want to get an isolated CSS environment which doesn't effect by the global CSS, ShadowRoot could be a vanilla solution.

Using ShadowRoot in React could be easy via react-shadow-root

more example Shadow DOM and ReactJS