How to prevent rewriting the styles of a react application mounted in a normal website (eg Wordpress)?

Question

WordPress

Hello.
Who can share the experience of using React applications in sites like Wordpress.
Ran into an issue where React app styles overwrite website styles (both have overlapping classes (e.g. normalizations, default colors and/or different Bootstrap settings)
How do you isolate a React app from the rest of the website.

Answer 1

it is most reliable to assign an id to the container in which your react sits and rewrite all the styles for the react starting from this #react_container_id
tails can become longer, but they will not conflict with the main ones in both directions
, usually in css it is better not to use id as selectors, but in In case of integration, this option helps out

Answer 2

CSS modules