React 组件样式被全局样式覆盖

Posted 2023-02-22

【中文标题】React 组件样式被全局样式覆盖

【英文标题】：React component styling being overridden by global styling

【发布时间】：2017-04-02 19:40:34

【问题描述】：

好的，为了立即说明问题，我有一种情况，即样式表 B 在样式表 A 之后被加载（或者我认为），因此由于级联而应该覆盖 A 的样式，实际上正在加载在A之前进入浏览器。顺序错误。

我有一个简单的 React 组件结构如下：

App
  > Header
  > Home
  > Footer

在我的“index.js”中，我有基本的语句顺序：

import './assets/theme/theme_specific/scss/style.scss';

render(
  <Router history=browserHistory>
    <Route path="/" component=App>
      <IndexRoute getComponent=lazyLoadComponent(Home) />
      <Route path="/resume" getComponent=lazyLoadComponent(Resume) />
  </Router>,
  document.getElementById("app")
);

这是 App.js 中的结构：

class App extends React.Component 
  render() 
    return (
      <div>
        <Header />
        this.props.children
        <Footer />
      </div>
    );
  

在 Header.js 的顶部，我有以下内容：

import './Header.scss';

处理 .scss 文件的 Webpack 加载器是：

test: /\.scss$/,
loader: 'style!css?sourceMap!resolve-url!sass?sourceMap',

我已经确认没有在任何地方使用!important，并且样式本身完全相同。

发生的情况是“Header.scss”首先被加载，“style.scss”第二个被加载。换句话说，'style.scss' 覆盖了 'Header.scss' 中的样式，而代码中的样式则相反。 Chrome 检查器中的“计算”选项卡证实了这种情况。

有人知道这里发生了什么吗？

【问题讨论】：

为什么会被覆盖？你在你的 scss 文件中使用非常通用的选择器吗？

将style.scss 的导入移到App.js 的导入之上。当App.js被导入时，它的所有子树，包括Header.js，它的样式被导入。

【参考方案1】：

按您指定的顺序导入 CSS。如果您希望自定义样式具有最高优先级，请将 import './Header.scss'; 放在所有其他导入的下方。

【参考方案2】：

现在感觉很傻。我在发布后几分钟就回答了我自己的问题。上面的@David L. Walsh 是正确的。

问题在于，在“index.js”中，我在 CSS 文件之前导入了 React 组件文件（包括上面提到的“style.scss”）。