Javascript 网页包样式加载器-在不重写的情况下导入react组件上的不同样式

我有2个需要内部样式的组件：

产品清单：

import './list.css';
import React from 'react';

export default class List extends React.Component {
   ...
}

产品详情：

import './details.css';
import React from 'react';

export default class Details extends React.Component {
   ...
}

它们有不同的样式，相互覆盖，为了简单起见，让我们假设它是

主体上的
背景色
属性：

list.css

body {
    background-color: #ddd;
}

details.css

body {
    background-color: #f80;
}

实际发生的情况-当通过webpack的样式加载器绑定时，两个元素的样式都保留在页面上：

<style type="text/css">
body {
    background-color: #ddd;
}
body {
    background-color: #f80;
}
</style>

这意味着详细信息的样式在列表页上也是活动的。让他们与众不同的最佳策略是什么？使用样式加载程序时，是否有替换样式的方法？
。您可以使用他们提供的可用api。你可以读到它

所有冲突的css都可以放入
.useable.css
，并使用useable api为这些文件创建一个加载程序

{
  module: {
    loaders: [
      { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
      { test: /\.useable\.css$/, loader: "style/useable!css" }
    ]
  }
}

希望有帮助。
使用同构样式加载器代替样式加载器。它将使用组件名称命名类名，并保持样式的唯一性。因此，可以保持组合性、独特性和批判性风格。有关这方面的更多信息：

{
  module: {
    loaders: [
      { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
      { test: /\.useable\.css$/, loader: "style/useable!css" }
    ]
  }
}