在React，Webpack應用程序中重疊CSS

我已經使用webpack和reactjs創建了一個應用程序。到目前爲止，我創建了2頁。我爲這兩個頁面定義了CSS樣式。但是，當我後加載頁面1負載2頁，從第1頁的樣式與這些頁2.在React，Webpack應用程序中重疊CSS

的干擾例如

require('style1.css'); 
var Page1 = React.createClass({ 
render: function(){ 
    return(
<div> <h1>This is Page1</h1> <span> hello from page1</span></div> 
) 
} 
}); 

module.exports = Page1;

style1.css

span { 
    color : red 
}

頁2

require('style2.css'); 

var Page2 = React.createClass({ 
render: function(){ 
    return(
<div> <h1>This is Page2</h1> <span> hello from page2</span></div> 
) 
} 
}); 

module.exports = Page2;

style2.css

h1 { 
    color : blue 
}

當第2頁第1頁被加載後，跨度的顏色爲紅色，這是從第1頁的風格加載。有什麼辦法可以避免這種干擾，或者我在這裏做錯了什麼？

來源

2016-01-26 Gilson PJ

你能告訴我們你是如何從第1頁傳到第2頁的嗎？是否有一個父組件？路由器？ – Snahedis

假設它是單頁面應用程序，我不確定它會按照您希望的方式工作。一旦將其加載到瀏覽器中，樣式表不會簡單消失，因爲您已更改路由。 – aw04

@Snahedis是的我正在使用反應路由器我沒有在示例中添加鏈接標記。 –

您可以爲每個React組件設置本地樣式表。

所以樣式表本身也會有這樣的事情：

:local(.styles) { 

    .your-style{...} 
}

你可以把它保存在同一文件夾作爲您的組件代碼。您導入樣式像這樣：

/* component styles */ 
import { styles } from './styles.scss'

在組件的渲染功能，你將有這樣的：<div>內

return (
    <div className={styles}> 
    ... 
    </div> 
)

一切都將應用該樣式表。爲您的WebPack

Loader配置：

loaders: [{ 
    test: /\.scss$/, 
    loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass', 
}]

你可以看一下這真棒boilerplate app，實現這一切非常漂亮。

來源

2016-01-26 20:34:49

Webpack不打算解決樣式表固有的問題。如果你想要組件級別的樣式，最簡單的解決方案是使用內聯樣式。你也可以看看Radium。 https://github.com/FormidableLabs/radium

來源

2016-01-26 18:50:36

因此，我們不能卸載樣式表一旦它加載正確嗎？好的，謝謝史蒂文斯，我會嘗試鐳，並會讓你知道結果。 –

在React，Webpack應用程序中重疊CSS

回答

相關問題