3

webpack と reactjs を使用してアプリケーションを作成しました。これまでに 2 つのページを作成しました。両方のページに CSS スタイルを定義しました。しかし、ページ 1 をロードした後にページ 2 をロードすると、ページ 1 のスタイルがページ 2 のスタイルと干渉しています。

例えば

ページ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
}

ページ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
}

page1 の後に page2 が読み込まれると、span の色は page1 のスタイルから読み込まれた赤でした。この種の干渉を回避する方法はありますか、それともここで何か間違ったことをしていますか?

4

2 に答える 2

2

React コンポーネントごとにローカル スタイルシートを使用できます。

したがって、スタイル シート自体は次のようになります。

:local(.styles) {

  .your-style{...}
}

コンポーネントコードと同じフォルダーに保存できます。次のようにスタイルをインポートします。

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

コンポーネントの render 関数では、次のようになります。

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

その中のすべてに<div>スタイルシートが適用されます。

Webpack のローダー構成:

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

これらすべてを非常にうまく実装しているこの素晴らしい定型アプリを見ることができます。

于 2016-01-26T20:34:49.813 に答える