ReactJS module - Prevent page CSS from applying on React app

Question

I have a React app that can be included in a page.

My problem is that I don't want to have conflicts between the page's CSS and my React app's CSS.

To prevent my CSS from spilling to the page content, I can simply use a namespace on all my CSS classes, such as "react_app".

But how to prevent external CSS from being used by my react app ? For example the page defines :

body {
    font-size: 1em;
    line-height: 1.8;
}

How can I make sure that my react components will not pick it up ?

A solution would be to define "line-height" for all my classes to override this definition, but I don't want to do that because it is not possible to cover all properties and it would take space.

Thanks for your help !

Answer 1

Try to use these reset classes inside your component

https://meyerweb.com/eric/tools/css/reset/

Answer 2

Did you try to use CSS-modules ?

https://github.com/gajus/react-css-modules

It might help with your problem.