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

【问题标题】：How to limit style to component level in React?如何在 React 中将样式限制为组件级别？
【发布时间】：2018-03-24 01:44:25
【问题描述】：

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

现在我正在使用包 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>
    );
  }
}

【问题讨论】：

标签： css reactjs

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您需要使用一个类来将样式限制为特定组件的功能：

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;

【讨论】：

谢谢，不过邮件是服务器发的，一般有几十甚至上百种样式，很难手动编辑。

【解决方案3】：

<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;

【讨论】：

谢谢。但是我的问题提到样式来自邮件，并且很难手动编辑每个邮件样式，尤其是当您不知道里面的样式时。

【解决方案4】：

是的，您可以使用 CSS Modules，它是一个或多个 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

【讨论】：

我在想你可以将它与一些基本的“重置”样式一起使用。在干扰组件的已知规则上使用initial、inherit、unset 或revert 覆盖明显的过度样式。
嗯，抱歉没听懂。我可能不知道这里的一些风格知识。您介意在答案中提供一些代码吗？谢谢
@HongboMiao 会这样吗？还是您需要不同的方法？
回到电脑后我会尽快查看，谢谢！