如何在React Js中为不同的布局管理不同的CSS样式？

Question

我的前端和管理端有两种不同的布局。我在两种布局的渲染功能中都包含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文件。 下面是我的文件夹结构。

Answer 1

对于每个页面节，创建一个超类，并基于该超类编写所有CSS。此方法不会与版式冲突。

示例：

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

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