正在被全局樣式覆蓋的React組件樣式

好吧，只是爲了立即說明問題，我有一個樣式表B在樣式表A之後被加載（或者我想過）的樣式表B，因此應該重寫A的樣式，因爲的級聯，事實上是在B之前加載到瀏覽器中。順序是錯誤的。正在被全局樣式覆蓋的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';

的的WebPack裝載機多數民衆贊成處理.scss文件是：

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

我已經證實，沒有被任何地方使用!important和造型本身是完全一樣的。

發生了什麼是「Header.scss」正在加載FIRST，而'style.scss'SECOND。換句話說，'style.scss'重寫了'Header.scss'中的樣式，而與之相反，它們出現在代碼中。 Chrome檢查員中的「計算」標籤證實了這種情況。

有人知道這裏發生了什麼嗎？

來源

2016-11-18 NateQ

爲什麼會覆蓋任何東西？你在你的scss文件中使用非常普遍的選擇器嗎？ – azium

將「style.scss」的導入移動到「App.js」的上方。當'App.js'被導入時，所有的子樹都包含'Header.js'，並且它的樣式被導入。 –

CSS按您指定的順序導入。如果您希望自定義樣式具有最高優先級，請將import './Header.scss';放在所有其他導入下。

來源

2016-11-18 20:58:59

現在感覺很愚蠢。發佈後幾分鐘，我回答了我自己的問題。 @上面的大衛·沃爾什是正確的。

問題是，在'index.js'中，我導入了CSS文件（包括上面提到的'style.scss'）之前的React組件文件。

來源

2016-11-18 21:07:32 NateQ

正在被全局樣式覆蓋的React組件樣式

回答

相關問題