在 ReactJS 中更改组件时如何修复错误覆盖 CSS

Question

登录.jsimport React from 'react'export default class Login extends React.Component {   componentWillMount(){        import ('./styles/login_page.css');    }   ....   <Link to="/register">Create account</Link>}注册.jsimport React from 'react''export default class Register extends React.Component {   componentWillMount(){        import ('./styles/register_page.css');    }   ....   <Link to="/login">Login Now</Link>}应用程序.jsimport 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'));渲染后，我单击登录，然后单击创建帐户并再次单击登录，登录组件的 CSS 被注册组件的 CSS 覆盖，主页是相同的。我想在访问任何组件时，组件的 CSS 正在加载。有办法修复吗？

Answer 1

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

登录.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>

}

登录页面.css

.login-component .item1 { ... }

.login-component .item2 { ... }

注册.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>

}

注册页面.css

.register-component .item1 { ... }

.register-component .item2 { ... }

因此，即使两个组件都有匹配.item1和 的元素.item2，由于后代组合器，它们也会选择正确的规则。对于原始 CSS，这可能有点冗长，但如果您使用任何预处理器，它应该非常简单。

否则，您可能只想以某种方式使选择器不同。