With React, you're looking for css modules. They are widely adopted, can be incrementally migrated to, require no change in how you write your CSS and are probably already supported by your bundler (vite, webpack, create-react-app).
https://github.com/css-modules/css-modules
Also, it may be worth looking into why you're writing so much CSS in the first place. I found that 80% of my CSS addressed layout concerns (display: flex; direction: 'column'; margin: var(--space-2);), so using specialised components allowed me to write less coupled components in fewer lines of code.
You can either write them yourself, or check out something like https://www.radix-ui.com/themes/docs/overview/layout.
shortrounddev2
shadow dom
aswerty
Have bumped into this myself recently and we ended up prefixing all CSS classes and ids with a value (i.e. "xyz_"). We leverage Tailwind and our build tooling for this. This has proven somewhat successful but often need to review every site our widget is placed on for edge cases. But at this point we are close to abandoning this approach.
We plan to re-assess using iframes. Which we originally steered clear from due to their rather "dated" feel as a technology.
Also, it may be worth looking into why you're writing so much CSS in the first place. I found that 80% of my CSS addressed layout concerns (display: flex; direction: 'column'; margin: var(--space-2);), so using specialised components allowed me to write less coupled components in fewer lines of code. You can either write them yourself, or check out something like https://www.radix-ui.com/themes/docs/overview/layout.