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

我正在开发电子邮件客户端，我正在从 gmail 获取电子邮件。当我使用在页面上打印电子邮件内容时

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

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

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

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

标签： reactjsreduxhtml-emailemail-client

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

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

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