How to prevent the other styles to not apply inside the react div or component?

Issue

const [html, setHtml] = useState<string>("");
<div>
{html ? parse(html):""}
</div>

html is a template with its style but when it renders the other styles of the application override it. i want to prevent that common style of the application should not apply in html content and also html contents style should not apply to other components.

Solution

You can try to use the CSS all property and target all the children that come within the div container and override their styles moving forward, enabling you to apply styles that come within HTML template.

https://developer.mozilla.org/en-US/docs/Web/CSS/all

you can define your CSS style as

/* Targets all the elements inside the div */
div * { 
   all: inherit;
}

Answered By - Ahsan-J