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;

样式1.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;

样式2.css

h1 {
   color : blue
}

在page1之后加载page2时，span的颜色为红色，是从page1的style加载的。有什么办法可以避免这种干扰，还是我在这里做错了什么？

4

2 回答 2

2

每个 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',
}]

你可以看看这个很棒的样板应用程序，它很好地实现了所有这些。

于 2016-01-26T20:34:49.813 回答
1

Webpack 不会解决样式表的固有问题。如果您想要组件级样式，最简单的解决方案是使用内联样式。你也可以看看镭。https://github.com/FormidableLabs/radium

于 2016-01-26T18:50:36.517 回答