Reactjs 为什么react组件CSS会覆盖另一个组件的CSS

我的应用程序中有两个模块：-

- main module
- admin module

我想为它们维护不同的样式，但是管理模块的css覆盖了主模块的css

App.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

//styles
import './style/bootstrap/bootstrap.scss';

//apps
import Mainapp from './mainapp/Mainapp';
import Admin from './admin/Admin';

const MainappContainer = () => (
  <div className="App">
    <Mainapp />
  </div>
);

const AdminContainer = () => (
  <div className="App">
    <Admin />
  </div>
);

class App extends Component{
  render(){
    return (
      <Router>
        <Switch>
            <Route exact path="/admin" component={AdminContainer}/>
            <Route component={MainappContainer}/>
        </Switch>
      </Router>
    )
  }
}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
//风格
导入“./style/bootstrap/bootstrap.scss”；
//应用程序
从“/Mainapp/Mainapp”导入Mainapp；
从“./Admin/Admin”导入管理员；
const MainappContainer=（）=>(
);
常量AdminContainer=（）=>(
);
类应用程序扩展组件{
render（）{
返回(
)
}
}
导出默认应用程序；

Mainapp.js

import React, {Component} from 'react';

import '../style/custom-style.scss';

class Mainapp extends Component{
    render(){
      return (
        <div>
            Main App
        </div>
      )
    }
  }

  export default Mainapp;

import React，{Component}来自'React'；
导入“../style/custom style.scss”；
类Mainapp扩展组件{
render（）{
返回(
主应用程序
)
}
}
导出默认Mainapp；

Admin.js

import React, {Component} from 'react';

import '../style/admin-styles/admin-style.scss';

class Admin extends Component{
    render(){
      return (
        <div>
            Admin App
        </div>
      )
    }
  }

export default Admin;

import React，{Component}来自'React'；
导入“../style/admin style/admin style.scss”；
类管理扩展组件{
render（）{
返回(
管理应用程序
)
}
}
导出默认管理员；

我在admin-style.scss上指定的样式正在应用于主应用程序

---

我做错了什么？

我假设您正在使用Webpack捆绑您的应用程序？如果是，Webpack等现代模块绑定器将把您的所有资产（js、css、图像等）绑定到一个巨大的文件中（如果不使用代码拆分等高级Webpack技术）。这就是为什么要应用两种样式

---

一个模块的样式覆盖另一个模块的样式，这意味着您有CSS全局命名冲突，这意味着您有同名的CSS选择器，但应用了不同的样式。我建议使用以避免全局样式冲突。

您应该做更多的工作来确定css的作用域是的，css模块会创建一个局部作用域，但是，无论页面上的两个加载是mainapp还是adminapp，css都会创建一个局部作用域。是否有任何方法，我们只能在加载mainapp时加载mainapp css。管理应用的css对于mainapp是多余的，因为它将有不同的样式指南。为了实现这一点，我需要为管理员创建一个不同的react应用程序，或者像你说的那样在网页中使用代码拆分。是的，代码拆分是一种方法！这是一本好书：