如何为不同的组件使用不同的css文件，并使用相同的类名

我正在使用SCS并创建最终的css，它是页眉、页脚等组件的组合，在页面上保持不变

假设我有下面的类，他们在我的两个页面上有相同的名字，关于我们的组件和主页组件有哪些不同的风格

.first-section {

}

import React from 'react'
import Header from './headers/Header'
import Footer from './footers/Footer'
import LeftDrawer from './LeftDrawer'

import '../../../../media/assets/css/landingpages/aboutus.css'

export default class AboutUs extends React.Component {
  render() {
    return (
      <div class="page-container">
        <LeftDrawer></LeftDrawer> 
        <div class="page-container-inner" id="about-us">
          <Header></Header>

          <article class="first-section text-center">
          </article>
          <Footer></Footer>
          {/*<!-- /.page-container-inner -->*/}
        </div>
        {/*<!-- /.page-container -->*/}
      </div>      
    )
  }
}

。第一节{
}
从“React”导入React
从“./headers/Header”导入标题
从“./footers/Footer”导入页脚
从“./LeftDrawer”导入LeftDrawer
导入“../../../../media/assets/css/landingpages/aboutus.css”
导出默认类AboutUs扩展React.Component{
render（）{
返回(
{/**/}
{/**/}
)
}
}

类似Home.jsx

import React from 'react'
import Header from './headers/Header'
import Footer from './footers/Footer'
import LeftDrawer from './LeftDrawer'

import '../../../../media/assets/css/landingpages/home.css'

export default class Home extends React.Component {
  render() {
    return (
      <div class="page-container">
        <LeftDrawer></LeftDrawer> 
        <div class="page-container-inner" id="about-us">
          <Header></Header>

          <article class="first-section text-center">
          </article>
          <Footer></Footer>
          {/*<!-- /.page-container-inner -->*/}
        </div>
        {/*<!-- /.page-container -->*/}
      </div>      
    )
  }
}

从“React”导入React
从“./headers/Header”导入标题
从“./footers/Footer”导入页脚
从“./LeftDrawer”导入LeftDrawer
导入“../../../../media/assets/css/landingpages/home.css”
导出默认类Home扩展React.Component{
render（）{
返回(
{/**/}
{/**/}
)
}
}

---

如何防止它们在反应中发生碰撞？cz它们的名称相同

这可以使用CSS特性来处理。为每个页面向

页面容器添加一个类


及


然后在CSS中：

.first-section {
  /* your general .first-section styles */
}

.home .first-section {
  /* your home styles */
}

.about .first-section {
  /* your about styles */
}

.home.first section
和
.about.first section
块不会冲突，可以覆盖
.first section
中的任何常规样式。只需确保它们在css中以这种方式排序。
我使用Webpack捆绑React，并将
css加载程序与css模块一起使用。当我导入css时，我将其分配给一个变量：`import styles from'../../which.css'

然后，当我应用类名时，您使用
样式.class
或
样式['class']
：
使用

举个简单的例子，在JS文件中，您可以执行以下操作：

import styles from './local.css';

<div className={styles.page-container}></div>

此
.page容器
样式不会影响其他容器（即使它们是嵌套的）

然而，我知道这个解决方案并非微不足道。如果你需要一个更简单的实现，你可以考虑使用一个库，比如
所以，你想使用<代码>。第一部分类，但是它们对于不同的页面应该有不同的样式吗？@ NyMaLaGasHh：是的，我想我们可以通过WebPACK来管理它。
:local(.page-container) {
  border: 1px solid red;
}