React component with dangerouslySetInnerHTML, contain CSS

Question

I have a React component that renders this element:

<div dangerouslySetInnerHTML={{__html: this.props.htmlString}}/>

It works fine, and the html is being rendered. However, the issue that I'm having is that my client code has CSS in place, which is reaching into the component that I'm rendering from this.props.htmlString. Is there a way to prevent my client CSS code from being applied to this component?

This sounds like a typical issue with global CSS. If you use styled CSS or CSS Modules it might solve your issue. — Aaron Beall
– Aaron Beall, Commented May 26, 2017 at 17:31

Arnav Aggarwal · Accepted Answer · 2017-05-26 16:58:30Z

2

You'd have to target the element in your CSS and override the styles that you don't want to be applied.

answered May 26, 2017 at 16:58

Arnav Aggarwal

7895 silver badges7 bronze badges

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

1 Comment

YOO629 Over a year ago

Sigh...That's what I thought. Fortunately, there are only like 3-4 properties that I need to stop from being inherited but I sure wish there was a way to just stop inheritance from a parent container and use default values instead. Maybe a good idea for a side project later on..

Collectives™ on Stack Overflow

React component with dangerouslySetInnerHTML, contain CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related