Javascript 如何修复在ReactJS中更改组件时覆盖CSS的错误 Login.js 从“React”导入React 导出默认类登录扩展React.Component{ 组件willmount（）{ 导入（'./styles/login_page.css'）； } .... 创建帐户 } Register.js 从“React”导入React 导出默认类寄存器扩展React.Component{ 组件willmount（）{ 导入（'./styles/register_page.css'）； } .... 立即登录 } App.js 从“React”导入React 从“react dom”导入react dom 从“react router dom”导入{Route，Switch，BrowserRouter} 从“./Login”导入登录名 从“./寄存器”导入寄存器 从“./PageNotFound”导入PageNotFound ReactDOM.render( , document.getElementById（'root'）；

渲染完成后，我单击“登录”，然后单击“创建帐户”，再单击“登录”，登录组件的CSS被注册组件的CSS覆盖，主页是相同的。我想当去任何组件，组件的CSS是加载。有办法解决吗？

这通常通过在CSS中使用来解决。您需要在每个组件的根元素中设置一个不同的类，并通过将其选择器作为该类的后代来声明所有其他CSS样式

Login.js

import React from 'react'

export default class Login extends React.Component {
   componentWillMount(){
        import ('./styles/login_page.css');
    }
   ....
   <Link class="login-component" to="/register">Create account</Link>
}

Register.js

import React from 'react''

export default class Register extends React.Component {
   componentWillMount(){
        import ('./styles/register_page.css');
    }
   ....
   <Link class="register-component" to="/login">Login Now</Link>
}

因此，即使这两个组件都有匹配

.item1

和

.item2

的元素，它们也会根据后代组合符选择正确的规则。对于原始CSS，这可能有点冗长，但如果您使用任何预处理器，它应该非常简单

---

否则，您可能只想以某种方式区分选择器。

两种css之间的共同点是什么？请参考此，这有助于解决此问题，我已经参考了，但css已加载，它们将覆盖以前的内容

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Switch, BrowserRouter } from 'react-router-dom'
import Login from './Login'
import Register from './Register'
import PageNotFound from './PageNotFound'

ReactDOM.render(
  <BrowserRouter>
    <Switch>
        <Route exact path='/login' component={Login }/>
        <Route exact path='/' component={Home} />
        <Route exact path='/register' component={Register }/>
        <Route component={PageNotFound} />
      </Switch>
  </BrowserRouter>,
  document.getElementById('root'));

import React from 'react'

export default class Login extends React.Component {
   componentWillMount(){
        import ('./styles/login_page.css');
    }
   ....
   <Link class="login-component" to="/register">Create account</Link>
}

.login-component .item1 { ... }
.login-component .item2 { ... }

import React from 'react''

export default class Register extends React.Component {
   componentWillMount(){
        import ('./styles/register_page.css');
    }
   ....
   <Link class="register-component" to="/login">Login Now</Link>
}

.register-component .item1 { ... }
.register-component .item2 { ... }