Isolating a dangerouslySetInnerHTML div from global CSS

Question

I'm seeing discrepancies in styling when I render an email HTML string (which has all its styles defined in-line) in my NextJS React app, like so:

<div id='emailContent' dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />

My assumption is that my global CSS styles are clashing with the inline styles in the HTML string. What supports this guess is that the styles look perfect when I render using an iframe (which I know isolate its contents from global CSS by default) like so:

<iframe srcDoc={sanitizedHtml} />

Unfortunately, with my use case, I can't go with this solution because it takes much longer to render the HTML than using the dangerousSetInnerHTML method.

Is there any way to ensure this div only renders with the CSS styles defined in-line the HTML, and ignore any CSS styles set globally?

What I've tried:

Setting this CSS globally:

#emailContent { 
  all: revert; /* also tried unset */
}

#emailContent * { 
  all: revert; /* also tried unset */
}

... which is giving me mixed results - various combos of revert and unset fixes the styling for some of the emails, but not others.

Wondering if there is a more straightforward solution. Thanks in advance.

Answer 1

Turns out the iframe solution was slow to load due to a separate issue. With that fixed, this seems to be the way to go!