Vite plugin that enables Scoped CSS for React components (using the Shadow DOM)

vite-react-css

Vite plugin that enables Scoped CSS for React components (using the Shadow DOM)

✨ Compatible with SSR!

How it works

To add scoped CSS to your React component, create a file with the same name but a different extension (any of the supported CSS dialects). For example, if your component file is named Foo.tsx, you could create a Foo.css file to accompany it.

Note that your React component must be the default export.

Your component will be wrapped with a <div> which will have the “shadow root” attached to it. You can style this element by declaring a :host {} rule within your CSS file. From your global CSS, you can use the .ShadowRoot selector to stylize every shadow root added by vite-react-css.

GitHub

View Github