React 电子邮件客户端 - 打印邮件详细信息会影响页面布局
React email client - Printing mail details affects page layout
我正在开发电子邮件客户端，我正在从 gmail 中获取电子邮件。当我使用
在页面上打印电子邮件内容时
<div dangerouslySetInnerHTML={{ __html: body.content }} />
它工作正常，但如您所知，电子邮件带有内联 css，这影响了我的页面 UI，字体大小发生变化，div shrinks/expands.
为了克服这个问题，我使用了 Iframe，并将电子邮件内容打印到 iframe，这解决了我的问题但我注意到，如果我将电子邮件打印到 Iframe，电子邮件本身会失去一些样式。 gmail、outlook 和我的电子邮件客户端中的字体看起来不同。
电子邮件在 gmail 和 outlook 中看起来几乎相似，但在我的电子邮件客户端页面中看起来大不相同。
Gmail 所做的，例如，为了分隔每封电子邮件的特定 CSS，是为所有 class 元素和样式添加前缀。此前缀对于每封电子邮件都是唯一的。
所以一个class的“隐藏”可能会变成class="m_-8236917340709346301hide"，嵌入的CSS中相应的样式也会改变，即.m_-8236917340709346301hide{display:none!important}.
现在电子邮件 CSS 与页面的其余部分分开了。您可能还需要 CSS 重置。
我正在开发电子邮件客户端，我正在从 gmail 中获取电子邮件。当我使用
在页面上打印电子邮件内容时<div dangerouslySetInnerHTML={{ __html: body.content }} />
它工作正常，但如您所知，电子邮件带有内联 css，这影响了我的页面 UI，字体大小发生变化，div shrinks/expands.
为了克服这个问题，我使用了 Iframe，并将电子邮件内容打印到 iframe，这解决了我的问题但我注意到，如果我将电子邮件打印到 Iframe，电子邮件本身会失去一些样式。 gmail、outlook 和我的电子邮件客户端中的字体看起来不同。
电子邮件在 gmail 和 outlook 中看起来几乎相似，但在我的电子邮件客户端页面中看起来大不相同。
Gmail 所做的，例如，为了分隔每封电子邮件的特定 CSS，是为所有 class 元素和样式添加前缀。此前缀对于每封电子邮件都是唯一的。
所以一个class的“隐藏”可能会变成class="m_-8236917340709346301hide"，嵌入的CSS中相应的样式也会改变，即.m_-8236917340709346301hide{display:none!important}.
现在电子邮件 CSS 与页面的其余部分分开了。您可能还需要 CSS 重置。