React 电子邮件客户端 - 打印邮件详细信息会影响页面布局

问题描述

我正在开发电子邮件客户端，我正在从 gmail 获取电子邮件。当我使用

在页面上打印电子邮件内容时

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

它工作正常，但正如您所知，电子邮件带有内联 css，这会影响我的页面 UI、字体大小更改、div 缩小/扩展。

为了克服这个问题，我使用了 iframe，并将电子邮件内容打印到 iframe，这解决了我的问题但我注意到如果我将电子邮件打印到 iframe，电子邮件本身会失去一些样式。 Gmail、Outlook 和我的电子邮件客户端中的字体看起来不同。

电子邮件在 gmail 和 Outlook 中看起来几乎相似，但在我的电子邮件客户端页面中看起来却大不相同。

解决方法

例如，Gmail 为分隔每封电子邮件的特定 CSS 所做的工作是为所有类和样式添加前缀。此前缀对每封电子邮件都是唯一的。

所以一类“隐藏”可能会变成class="m_-8236917340709346301hide"，嵌入的CSS中相应的样式也会发生变化，即.m_-8236917340709346301hide{display:none!important}。

现在电子邮件 CSS 与页面的其余部分是分开的。您可能还需要重置 CSS。