我有兩個前端和管理端不同的布局。我在兩種布局中的渲染函數中都包含了css文件，但是兩種布局中的css沖突。

前端布局

import React, { Component } from "react";
import {  Switch, Redirect, Route } from "react-router-dom";

import Header from "components/FrontEnd/Header/Header";
import Footer from "components/FrontEnd/Footer/Footer";
import Menu from "components/FrontEnd/Menu/Menu";

class Frontend extends Component {
  render() {
    require("../../assets/fonts/frontEnd.css");
    return (
      <div className="section-frontEnd">
        <Header {...this.props} />
        <div id="main-panel" className="" ref="mainPanel">
          <Switch>
            //Routes Swichting ...
          </Switch>
          <Footer />
        </div>
      </div>
    );
  }
}

export default Frontend;

管理端布局

import React, { Component } from "react";
import {  Switch, Redirect } from "react-router-dom";

import Header from "components/Admin/Header/Header";
import Footer from "components/Admin/Footer/Footer";
import Sidebar from "components/Admin/Sidebar/Sidebar";

class Dashboard extends Component {
  render() {
    require('bootstrap/dist/css/Admin.css')
    return (
      <div className="wrapper">
        <Sidebar  />
        <div id="main-panel" className="main-panel" ref="mainPanel">
          <Header  />
          <Switch>
            //Routes Swichting ...
          </Switch>
          <Footer />
        </div>
      </div>
    );
  }
}


export default Dashboard;

請給我一個更好的解決這個問題的方法。 注意:我沒有在我的項目中使用webpack文件。 下面是我的文件夾結構。

為每個頁面創建一個超類，并以此為基礎編寫所有的CSS。這種方法不會與布局沖突。

示例:

.section-frontEnd #main-panel{
  // code
}

.admin-frontEnd #main-panel{
  // code
}

感謝貢獻一個堆棧溢出的答案！

請務必回答問題。提供詳細信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應其他答案。根據意見發表聲明；用參考資料或個人經歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。