Question

我的应用尝试显示电子邮件。有时，电子邮件中的样式会影响应用程序本身。

现在我正在使用包juice在电子邮件html中内联样式。但是，有时它无法正确内联。所以我试着寻找其他解决方案。

我知道Angular会在每个类中自动添加一些随机字符串，以确保一个组件中的样式不会影响其他组件，在React中有相同的方法吗？或者是否有其他方法可以在不使用iframe的情况下将样式限制为组件级别？感谢

演示显示电子邮件中的p { color: red; }也会影响应用程序本身。在这种情况下，它会影响Content in app。

Live demo

class Mail extends Component {
  render() {
    // the style inside is from mail, in real case, it can have tens or even hundreds of different styles
    const mailFromServer = `
      <html>
        <head>
          <style>
            p { color: red; }
          </style>
        </head>

        <body>
          <p>Content in mail</p>
        </body>
      </html>
    `;

    return (
      <div>
        <div dangerouslySetInnerHTML={{__html: mailFromServer}} />
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Mail />

        <p>Content in app</p>
      </div>
    );
  }
}

Answer 1

您需要使用课程将样式限制为特定组件的功能：

import React, { Component } from 'react';
import { render } from 'react-dom';

class Mail extends Component {
  render() {
    const mail = `
      <html>
        <head>
          <style>
            .mail-header { color: red; }
          </style>
        </head>

        <body>
          <h1 class="mail-header">Heading in mail</h1>
        </body>
      </html>
    `;

    return (
      <div>
        <div dangerouslySetInnerHTML={{__html: mail}} />
      </div>
    );
  }
}
export default Mail;

Answer 2

<style>..</style>或CSS表格中的样式是全局的。它们适用于您的应用。

如果您可以控制电子邮件的格式，我建议为不同的电子邮件类型设置不同的类名。

如果您有一组有限的电子邮件类型，您可以在css表中指定每种类型的样式，并将其导入html文件或Webpack。

styles.css

.important-email { color: red; }
.not-important-email { color: blue; }
// ...
// styles for different email types

Mail.jsx

class Mail extends Component {
  render() {
    const mail = `
      <html>
        <head>
        </head>

        <body>
          <h1 class="important-email">Heading in mail</h1>
        </body>
      </html>
    `;

    return (
      <div>
        <div dangerouslySetInnerHTML={{__html: mail}} />
      </div>
    );
  }
}
export default Mail;

Answer 3

有几种方法可以做到这一点。其中一种方法是将style传递给元素并将样式定义为对象。例如

const styles = {
        content: {
            color: '#000',
            backgroundColor: '#fafafa',
        },
    };

class Mail extends React.Component {
    render() {
        return() {
            <p style={{styles.content}}> Content </p>
        }
    }
}

如果您真的想要可扩展的东西，那么您可以使用styled-components这对我个人工作非常好，并满足您所有的造型需求。

Answer 4

是的，您可以使用CSS模块，这是一个或多个css文件（用js编写），默认情况下，所有类名都在本地自动作用于每个组件。

这里有一篇很好的文章https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e

您还可以尝试重置那些通常被您的Mail html覆盖的已知html实体。您可能需要玩一下，但是，根据您的示例，您可以执行以下操作：

https://stackblitz.com/edit/react-neymbb

基本上，在我的沙箱中，我将段落颜色和填充重置为默认值，并将其与另一个内联样式结合使用。根据应用程序中css继承的整个结构，您的结果可能会有所不同，但您应该可以使某些东西变得可行。

有关我推荐的css值的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/initial

如何在React中将样式限制为组件级别？

4 个答案: