Prevent dangerouslySetInnerHTML from inheriting css in React

Question

I don't want to mix my application with the css that is included in the html element that i'm receiving.

Is there a way to prevent dangerouslySetInnerHTML from inheriting style from the current page?

return (<div dangerouslySetInnerHTML={{ __html: template }}></div>)

Ed Lucas · Accepted Answer · 2019-12-30 15:14:37Z

3

You could display the content in an iframe, which would have its own CSS.

Not the solution you're asking for, but you could instead add a class to your div and override the styles that you don't want to impact your HTML content. This might be reasonable if you don't have many styles to override.

answered Dec 30, 2019 at 15:14

Ed Lucas

7,4644 gold badges41 silver badges52 bronze badges

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

1 Comment

Stephen R Over a year ago

Good response. Unless it's a very simple page and you know exactly what you're getting from the innerHTML, (which, based on the word "dangerous" I wouldn't assume), the iframe is probably the safest bet.

Arian Nargesi · Accepted Answer · 2023-07-21 15:04:19Z

0

You can do something like this:

return (
    <div 
        dangerouslySetInnerHTML={{ __html: template }} 
        style={{all : "initial"}}>
    </div>
)

This style specifies that all the element's properties should be changed to their initial values.

You can read more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/all

edited Jul 21, 2023 at 15:04

Arian Nargesi

5611 gold badge4 silver badges17 bronze badges

answered Jul 17, 2023 at 11:35

Ahsan

1

Collectives™ on Stack Overflow

Prevent dangerouslySetInnerHTML from inheriting css in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related