如何爲不同的組件使用不同的css文件與相同的類名稱反應

我正在使用scss並創建最終的CSS，它是頁眉頁腳等組件在頁面中保持相同的組合。如何爲不同的組件使用不同的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它們的名稱相同

來源

2017-06-02 meena

所以，你想使用'.first-section'類，但是它們應該對不同的頁面有不同的樣式？ –

@NirmalyaGhosh是的，我認爲我們可以通過webpack管理它 – meena

這可以使用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中以這種方式排列。

來源

2017-06-02 16:36:58 RickTakes

我使用Webpack捆綁React，並使用css-loader與css模塊。當我導入我的CSS時，我將它分配給一個變量：`從'../../whatever.css'導入樣式;

然後，當我申請班級名稱時，您使用styles.class或styles['class']：<article className={ styles['first-section'] }>...。通過配置css模塊，這實際上導致該類類似Home__first-section--kfoia8，通過預先掛起組件名稱，並附加一個隨機散列。檢查出css-loader docs。

來源

2017-06-02 20:08:47

如何爲不同的組件使用不同的css文件與相同的類名稱反應

回答

相關問題