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

Question

Login.js

import React from 'react'

export default class Login extends React.Component {
   componentWillMount(){
        import ('./styles/login_page.css');
    }
   ....
   <Link 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 to="/login">Login Now</Link>
}

App.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 中使用 descendant combinator 来解决。您需要在每个组件的根元素中设置一个不同的 class，并通过将它们的 select 或 class 的后代写入来声明所有其他 CSS 样式。 17=]

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>
}

login_page.css

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

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>
}

register_page.css

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

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

否则，您可能只是想以某种方式使 select 不同。

Answer 2

我在同一应用程序中使用不同的 css 模块时也遇到了同样的挑战，我猜问题出在编译器构建 css 时，因为所有 css被编译成一个文件，你可能想通过给它们不同的主 class 名称来区分它们。

如果您使用 sass[=12=，那么在这种情况下的解决方案是将 css 样式嵌套在基础 class 中]

.loginpageContainer {
  .input{ //custom css
 }}
.registerPageContainer{ 
 .input{
// custom css
}}

如果你使用纯 css 同样明智，只需使用主 class

.loginContainer .login .input{
//custom css
} 
.registerContainer .login .input{
//custom css
}

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

How to fix error override CSS when change component in ReactJS

javascript

reactjs

css-loader

Login.js

Register.js

App.js