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

Question

登录.js

import React from 'react'

export default class Login extends React.Component {

   componentWillMount(){

        import ('./styles/login_page.css');

    }

   ....

   <Link to="/register">Create account</Link>

}

注册.js

import React from 'react''

export default class Register extends React.Component {

   componentWillMount(){

        import ('./styles/register_page.css');

    }

   ....

   <Link to="/login">Login Now</Link>

}

应用程序.js

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'));

渲染后，我单击登录，然后单击创建帐户并再次单击登录，登录组件的 CSS 被注册组件的 CSS 覆盖，主页是相同的。我想在访问任何组件时，组件的 CSS 正在加载。有办法修复吗？

Answer 1

这通常通过在 CSS 中使用后代组合器来解决。您需要在每个组件的根元素中设置一个不同的类，并通过将它们的选择器编写为该类的后代来声明所有其他 CSS 样式。登录.jsimport React from 'react'export default class Login extends React.Component {&nbsp; &nbsp;componentWillMount(){&nbsp; &nbsp; &nbsp; &nbsp; import ('./styles/login_page.css');&nbsp; &nbsp; }&nbsp; &nbsp;....&nbsp; &nbsp;<Link class="login-component" to="/register">Create account</Link>}登录页面.css.login-component .item1 { ... }.login-component .item2 { ... }注册.jsimport React from 'react''export default class Register extends React.Component {&nbsp; &nbsp;componentWillMount(){&nbsp; &nbsp; &nbsp; &nbsp; import ('./styles/register_page.css');&nbsp; &nbsp; }&nbsp; &nbsp;....&nbsp; &nbsp;<Link class="register-component" to="/login">Login Now</Link>}注册页面.css.register-component .item1 { ... }.register-component .item2 { ... }因此，即使两个组件都有匹配.item1和 的元素.item2，由于后代组合器，它们也会选择正确的规则。对于原始 CSS，这可能有点冗长，但如果您使用任何预处理器，它应该非常简单。否则，您可能只想以某种方式使选择器不同。