小编Den*_*Den的帖子

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

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

全局.css:

    label { 
        color: red;
        font-weight: bold;
     }
Run Code Online (Sandbox Code Playgroud)

组件.js:

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

结果:

在此输入图像描述

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

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

javascript css components reactjs

5
推荐指数
1
解决办法
6372
查看次数

标签 统计

components ×1

css ×1

javascript ×1

reactjs ×1