避免 React 中的全局样式

Answer 1

如果您遇到 Tailwind CSS 样式问题影响 HTML 电子邮件预览的外观，您可以将预览与 Tailwind 样式隔离开来，方法是将其封装在具有实用程序类的容器中，该实用程序类可重置或中和 Tailwind 样式。

具体操作方法如下：

jsx:

// some code...
<div className="w-4/5 rounded-lg p-2 bg-white mx-auto overflow-y-auto">
  <div className="email-preview" dangerouslySetInnerHTML={{ __html: messagePreview }} />
</div>
// some code...

然后，在 CSS 中或直接在 JSX 中（如果您使用的是 CSS-in-JS 解决方案，例如 styled-components），您可以重置或中和任何影响电子邮件预览的 Tailwind 样式：

CSS：

.email-preview {
  /* Resetting or neutralizing Tailwind styles */
  margin: 0;
  padding: 0;
  border: none;
  /* Add any additional styles you need for your email preview */
}

通过将电子邮件预览封装在单独的容器中并向其应用自定义样式，您可以防止 Tailwind 的默认样式影响 HTML 电子邮件预览的外观。根据需要调整自定义样式，以获得电子邮件预览所需的外观。