为什么反应组件 CSS 覆盖另一个组件的 CSS

Question

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

- main module
- admin module

我想为它们保留不同的样式，但是管理模块的 css 覆盖了 main

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;

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;

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;

我在 admin-style.scss 上指定的样式甚至应用到主应用程序。

我做错了什么？

Answer 1

我假设您正在使用 Webpack 来捆绑您的应用程序？如果是，现代模块打包器（例如 Webpack）会将您的所有资产（js、css、图像等）打包到一个巨大的文件中（如果未使用高级 Webpack 技术（例如代码拆分））。这就是您看到应用了两种样式的原因。

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

为什么反应组件 CSS 覆盖另一个组件的 CSS

Why does react component CSS override CSS for another component

sass

reactjs

react-router

react-component