Перекрытие CSS в React, приложение Webpack

Question

Я создал приложение, использующее webpack и reactjs. До сих пор я создал 2 страницы. Я определил стиль CSS для обеих страниц. Но когда я загрузить страницу 2 после загрузки страницы 1, стили со страницы 1 мешают те страницы 2.

Например

Page 1

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 
} 

Page 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 загружаются после page1, цвет пролета был красным, который был загружен из стиля стр.1 в. Есть ли способ избежать такого рода помех или я делаю что-то неправильно здесь?

Answer 1

Для каждого компонента React может быть создана таблица стилей.

Так сама таблица стилей будет иметь что-то вроде этого:

:local(.styles) { 

    .your-style{...} 
} 

Вы можете сохранить его в той же папке, что и код компонента. Вы импортировать стиль, как так:

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

В функции визуализации вашего компонента вы будете иметь это:

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

Все в этой <div> будет иметь таблица стилей применяется.

конфигурации загрузчика для Webpack:

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

Вы можете посмотреть на этот удивительный boilerplate app, который реализует все это очень красиво.

Answer 2

Webpack не будет исправлять присущие проблемы с таблицами стилей. Если вам нужен стиль уровня компонентов, самым простым решением является использование встроенных стилей. Вы также можете посмотреть на Radium. https://github.com/FormidableLabs/radium