Question

我使用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的样式加载的。有没有办法避免这种干扰，或者我在这里做错了什么？

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

在React，Webpack应用程序中重叠CSS

2 个答案: