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

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

css reactjs

Css 如何在React中将样式限制为组件级别？,css,reactjs,Css,Reactjs,我的应用程序尝试显示电子邮件。有时，电子邮件中的样式会影响应用程序本身现在，我正在使用该软件包在电子邮件html中内联样式。但是，有时它不能正确地内联。所以我试着找到其他的解决办法我知道Angular会在每个类中自动添加一些随机字符串，以确保一个组件中的样式不会影响其他组件，在React中有相同的方法吗？或者有没有其他方法可以在不使用iframe的情况下将样式限制在组件级别？谢谢演示显示电子邮件中的p{color:red；}也会影响应用程序本身。在这种情况下，它会影响应用程序中的内容 c

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

现在，我正在使用该软件包在电子邮件html中内联样式。但是，有时它不能正确地内联。所以我试着找到其他的解决办法

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

演示显示电子邮件中的

p{color:red；}

也会影响应用程序本身。在这种情况下，它会影响应用程序中的内容

class邮件扩展组件{
render（）{
//里面的样式来自邮件，实际上，它可以有几十种甚至数百种不同的样式
常量mailFromServer=`
p{颜色：红色；}
邮件内容
`;
返回(
);
}
}
类应用程序扩展组件{
render（）{
返回(
应用程序中的内容
);
}
}

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

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;

import React，{Component}来自'React'；
从'react dom'导入{render}；
类邮件扩展组件{
render（）{
常量邮件=`
.mail标头{颜色：红色；}
邮件标题
`;
返回(
);
}
}
导出默认邮件；

样式在

中。

或来自CSS工作表的样式是全局的。它们应用于整个应用程序

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

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

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

class邮件扩展组件{
render（）{
常量邮件=`
邮件标题
`;
返回(
);
}
}
导出默认邮件；
实现这一点的方法很少。其中一种方法是将样式
传递给元素，并将样式定义为对象。比如说
const styles = {
        content: {
            color: '#000',
            backgroundColor: '#fafafa',
        },
    };

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

const styles={
内容：{
颜色：“#000”，
背景颜色：“#fafafa”，
},
};
类邮件扩展了React.Component{
render（）{
返回（）{
content
}
}
}

如果你真的想要一些可伸缩的东西，那么你可以用它来为我个人工作，非常好地满足你所有的造型需求
 是的，您可以使用CSS模块，这是一个或多个CSS文件（用js编写），其中默认情况下，所有类名都自动在本地作用于每个组件
这里有一篇关于这方面的好文章
您还可以尝试重置那些通常被邮件html覆盖的已知html实体。您可能需要玩一玩，但根据您的示例，您可以执行以下操作：

基本上，在我的沙盒中，我将段落颜色和填充重置为默认值，并将其与另一种内联样式结合使用。根据应用程序中css继承的整个构造，您的结果可能会有所不同，但您应该能够得到一些可行的结果
有关我推荐的css值的更多信息，请参见：
谢谢，但是，电子邮件来自服务器，通常有几十种甚至数百种样式，很难手动编辑。谢谢。但是我的问题提到了样式来自邮件，手动编辑每个邮件样式非常困难，特别是当你不知道里面是什么样式时。我想你可以使用这些样式和一些基本的“重置”样式。通过对那些干扰组件的已知规则使用initial
、inherit
、unset
或revert来覆盖明显的过度样式。嗯，很抱歉，我没有得到它。我可能不知道这里的一些风格知识。你介意在回答中提供一些代码吗？Thanks@HongboMiao这样行吗？或者你需要一个不同的方法吗？我会尽快检查，当我回到我的电脑，谢谢！
const styles = {
        content: {
            color: '#000',
            backgroundColor: '#fafafa',
        },
    };

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