As I render an email HTML string with all its styles defined in-line in my NextJS React app, I notice discrepancies in the styling:
<div id='emailContent' dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
It seems like there is a clash between global CSS styles and inline styles in the HTML string. This assumption is supported by the fact that rendering using an iframe (which isolates contents from global CSS) results in perfect styling:
<iframe srcDoc={sanitizedHtml} />
However, due to performance concerns, using the dangerousSetInnerHTML method is preferred over the iframe.
Is there a way to ensure that this div only applies the CSS styles defined within the HTML itself, ignoring any globally set styles?
My attempts so far:
I have tried setting the following CSS globally:
#emailContent {
all: revert; /* also tried unset */
}
#emailContent * {
all: revert; /* also tried unset */
}
This approach has resulted in inconsistent styling fixes - some emails are corrected while others remain unaffected.
If there is a simpler solution available, I would greatly appreciate your insights. Thank you in advance.