我如何为不同的组件使用不同的 css 文件以相同的类名进行反应答案

【问题标题】：How do i use different css files for different components React with same class names我如何为不同的组件使用不同的 css 文件以相同的类名进行反应
【发布时间】：2017-11-03 09:32:18
【问题描述】：

我正在使用 scss 并创建最终的 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>      
    )
  }
}

类似 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 中发生冲突？ cz他们是同名的

【问题讨论】：

那么，您想使用.first-section 类，但它们应该为不同的页面设置不同的样式？
@NirmalyaGhosh 是的，我认为我们可以通过 webpack 管理它

标签： css reactjs

【解决方案1】：

这可以使用 CSS 特异性来处理。为每个页面添加一个类到您的page-container。

<div class="page-container home">

和

<div class="page-container about">

然后在你的 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 中以这种方式排序即可。

【讨论】：

【解决方案2】：

我使用 Webpack 来捆绑 React，并将 css-loader 与 css 模块一起使用。当我导入我的 css 时，我将它分配给一个变量：`import styles from '../../whatever.css';

然后，当我应用类名时，您使用styles.class 或styles['class']：<article className={ styles['first-section'] }>...。配置了 css 模块后，这实际上导致类类似于 Home__first-section--kfoia8，通过预先挂起组件名称并附加随机散列。查看css-loader docs。

【讨论】：

【解决方案3】：

使用CSS Modules。

一个简单的例子，在你的 JS 文件中，你可以这样做：

import styles from './local.css';

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

那么在你的local.css，你需要：

:local(.page-container) {
  border: 1px solid red;
}

这种.page-container 样式不会影响其他样式（即使它们是嵌套的）。

但我知道这个解决方案并不简单。如果需要更简单的实现，可以考虑使用库，比如styled-components

【讨论】：