Question

我正在使用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他们是同名的

Answer 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中以这种方式订购。

Answer 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。

Answer 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

如何为不同的组件使用不同的css文件使用相同的类名进行React

3 个答案: