如何防止外部 CSS 添加和覆盖 ReactJS 组件样式答案

【问题标题】：How to prevent outside CSS from adding and overriding ReactJS component styles如何防止外部 CSS 添加和覆盖 ReactJS 组件样式
【发布时间】：2016-09-21 09:51:36
【问题描述】：

我有一个自定义的 ReactJS 组件，我想以某种方式设置样式并作为插件提供给许多不同的网站。但是当网站使用全局样式（Twitter 引导程序或其他 css 框架）时，它会添加并覆盖我的组件的样式。例如：

global.css：

    label { 
        color: red;
        font-weight: bold;
     }

component.js：

class HelloMessage extends React.Component {
  render() {
      let style = {
          color: "green"
      };
    return (<label style={style}>Hello</label>);
  }
}

结果：

上面我没有在我的组件样式中使用“font-weight: bold”，但结果我的组件正在使用它。

我希望能够封装我的自定义组件的样式，使它们在所有网站上看起来都一样。

【问题讨论】：

据我所知，如果您不希望您的元素继承属性，您需要自己设置它们。例如 style = { color: "green" , fontWeight: "normal"}
如果您使用 css 框架，组件将获得该框架的样式。从您正在使用的框架中删除那些组件样式
@Paran0a 我无法预见 global.css 中会包含哪些属性，或者我不知道网站上会包含哪些 css 框架。

标签： javascript css reactjs components

【解决方案1】：

在我看来，最好的方法是为你的组件定义某种重置类，并放入一组你可以在那里找到的 css 重置（例如http://meyerweb.com/eric/tools/css/reset/）

sass 文件中的定义可能如下所示：

.your-component-reset {
    div, span, object, iframe {
        margin: 0;
        padding: 0;
        border: 0;
        font-weight: normal;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    // add some more reset styles
}

为了避免在不想使用sass 时写很多东西，只需使用通用选择器*：

.your-component-reset * {
     margin: 0;
     padding: 0;
     font-weight: normal;
     // other reset styles ...
}

【讨论】：