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

Question

我是一个有帮助的助手，可以为您进行文本翻译。以下是需要翻译的内容：

我有一个自定义的 ReactJS 组件，希望以插件的形式提供给许多不同的网站，并按照特定的方式进行样式设计。但是当网站使用全局样式（Twitter Bootstrap 或其他 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"，但是我的组件在结果中使用了。

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

- Den

---

据我所知，如果您不希望元素继承属性，则需要自己设置它们。例如：style = { color: "green" , fontWeight: "normal"}。 - Paran0a

如果您使用CSS框架，组件将获得该框架的样式。请从您正在使用的框架中删除这些组件样式。 - Johan Kvint

@Paran0a 我无法预见 global.css 中会有哪些属性，也不知道网站会使用哪个 CSS 框架。 - Den

Answer 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 ...
}

- Richard Rutsche