Search code examples
reactjsreduxhtml-emailemail-client

React email client - Printing mail details affects page layout

I am working on email client, I am fetching emails from gmail. When I print email contents on page using

<div dangerouslySetInnerHTML={{ __html: body.content }} />

It works fine but as you know email comes with inline css which is affecting my page UI, font sizes changes, div shrinks/expands.

To overcome this I used Iframe, and printing email contents to iframe, this solved my problem But I noticed that If I print email to Iframe, email itself is loosing some styling. Fonts look different in gmail, outlook and my email client.

Email looks almost similar in gmail and outlook but looks way different in my email client page.

Solution

  • What Gmail does, as an example, to separate each email's specific CSS, is to add a prefix to all classes and styles. This prefix is unique to each email.

    So a class of "hide" might become class="m_-8236917340709346301hide", and the corresponding style in the embedded CSS would also change, i.e. .m_-8236917340709346301hide{display:none!important}.

    Now the email CSS is separate from the rest of the page. You may also need a CSS reset.