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 !

this might help you - github.com/gaoxiaoliangz/react-scoped-css — Naga Sai A
– Naga Sai A, Commented Oct 31, 2019 at 15:22

Hammed · Accepted Answer · 2019-10-31 15:23:46Z

2

Try to use these reset classes inside your component

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

answered Oct 31, 2019 at 15:23

Hammed

2222 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Henry Boisgibault Over a year ago

Interesting tool, however it doesn't cover all cases. Do you know a more generic version to block external CSS ?

Hammed Over a year ago

Try this gist.github.com/DavidWells/18e73022e723037a50d6

Mathieu Rios · Accepted Answer · 2020-09-21 11:41:27Z

1

Did you try to use CSS-modules ?

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

It might help with your problem.

answered Sep 21, 2020 at 11:41

Mathieu Rios

3945 silver badges19 bronze badges

Collectives™ on Stack Overflow

ReactJS module - Prevent page CSS from applying on React app

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related