相关疑难解决方法(0)

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

全局.css：

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

组件.js：

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

结果：

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

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

我在顶级文件中导入了带有全局样式的 CSS 文件index.js。

...
import React from 'react'
import ReactDOM from 'react-dom'
import './global.css'
...
ReactDOM.render(
    <Router>
      <App />
    </Router>,
  document.getElementById('root'),
)

我希望 global.css 应用于下面的所有反应组件（页面）。

然而，在某些组件中，全局添加的global.css会导致问题，我希望在某些组件中禁用它。

例如，我只需禁用 50 个组件中的 3 到 4 个，

所以我想删除仅在特定组件中全局添加的css文件。

我该如何解决？

我不想只将 global.css 添加到我需要的屏幕上。

该文件需要添加到index.js，并且我想仅在某些组件中禁用global.css。