Reactjs路由css问题答案

【问题标题】：Reactjs routing css issueReactjs路由css问题
【发布时间】：2020-04-27 03:35:40
【问题描述】：

我正在尝试设置小型 reactjs 应用程序，并且我正在使用路由器。

登录组件 - 单独的 Css 文件
注销组件 - 单独的 css 文件

当登陆到登录页面 css 时正在反射，但在导航到注销页面而不是注销 css 登录组件页面 css 时正在反射。如何解决此问题。

注意：在每个组件中导入样式

我们是否没有任何选项，比如在加载组件时会像配置一样加载这个 css 文件？

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import "../Login/LoginStyle.css";

class Login extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                 <form className="box">
                    <h1>Login</h1>
                    <input type="text" name="" placeholder="Username" />
                    <input type="password" name="" placeholder="Password" />
                    <input type="button" name="" value="Login" />
                </form>
            </div>
        )
    }
}

export default Login

LoginStyle.css

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: red;
}

注销.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import "../Logout/LogoutStyle.css";

class Logout extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                Logged out successfully
            </div>
        )
    }
}

export default Logout

LogoutStyle.css

body{
    background: grey;
}

导航到登录页面的背景颜色应该是红色，在注销组件加载时背景颜色应该是灰色。如何解决这个问题？

【问题讨论】：

标签： reactjs

【解决方案1】：

由于您的应用程序有两个 css 文件，因此无论您是在登录页面还是注销页面，这两个文件都会出现。要解决您的情况，您必须向组件添加类并根据该类添加特定的 css 以进行区分。

【讨论】：

我在单独的组件（登录和注销）中导入 CSS 文件，即使它采用两个组件的样式。如何解决这个问题

【解决方案2】：

在 react 应用程序中只有一个 HTML 文件，公共文件夹中的 index.html 和所有 css 文件 react-js 最后都绑定到一个文件，所以它会反映 body 标签的第一个 css 属性，i希望有意义

【讨论】：