React component styling being overridden by global styling

问题

Okay, just to state the problem right away, I have a situation where stylesheet B which is being loaded (or so I thought) AFTER stylesheet A, and should therefore be overriding A's styling because of cascading, is in fact being loaded into the browser BEFORE A. The order is wrong.

I have a simple React component structure as follows:

App
  > Header
  > Home
  > Footer

In my 'index.js' I have the basic order of statements:

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")
);

Here's the structure in App.js:

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

And at the top of Header.js I have the following:

import './Header.scss';

The Webpack loader that's processing .scss files is:

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

I've confirmed that there is no !important being used anywhere, and the styling itself is exactly the same.

What's happening is that "Header.scss" is being loaded FIRST, and 'style.scss' SECOND. In other words 'style.scss' is overriding the styles in 'Header.scss', versus the other way around as they appear in the code. The 'Computed' tab in Chrome inspector confirms this is the case.

Anybody have any idea what's going on here?

回答1:

The CSS is imported in the order you specify. If you'd like your custom styling to have the highest precedence, put import './Header.scss'; beneath all the other imports.

回答2:

Feeling very stupid now. I answered my own question just a few minutes after posting. @David L. Walsh above is correct.

The problem was that in 'index.js' I was importing the React component files before the CSS files (including 'style.scss' mentioned above).

来源：https://stackoverflow.com/questions/40685809/react-component-styling-being-overridden-by-global-styling

标签

css

reactjs

Sass

Webpack