Reactjs 如何在react路由的子级中使用不同的CSS文件

我刚开始学习REACT，但我对REACT路线有一个问题，问题是孩子们使用父CSS，但我们如何在孩子们身上使用新的CSS？没有从父CSS得到任何东西

我的文件结构如下：

---src
-----index.js
-----login.js
-----home.js
-----style.css

我在login.js中导入了'style.css'，但它在login.js中继续使用，我想在

home.js

中设计完全不同的样式，所以我创建了home.css并在其中添加了一些元素，但它没有覆盖style.css。 这是我的一些代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import Login from './login.js'
import New from './home.js'
const routing = (
    <Router>
        <div>
            <Route exact path="/" component={Login} />
            <Route path="/new" component={New} />
        </div>
    </Router>
  );
ReactDOM.render(routing, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{Route，Link，BrowserRouter as Router}
从“./Login.js”导入登录名
从“./home.js”导入新内容
常数路由=(
);
render（路由，document.getElementById（'root'）；

我的login.js 问题是style.css有一个

body

元素，我不能更改，如果在

login.js

中使用

div

，并放置一个

className

它有背景，但有边框，而不是整页。所以我加载localhost:3000/new，它仍然有相同的背景，我希望它完全是白色的，像新的页面一样，或者有直接的css，而不是使用parent。 所以我的问题是：

如何使路线中的每个子节点都具有独特的样式，而不是从父节点获得？

---

或者如何使用React实现这一点？

您可以使用许多不同的方法来设计React应用程序的样式，如js中的css、css模块、tailwindcss等等，。。。 我建议使用css模块，因为它不会影响应用程序的性能（零运行时间）。

---

要在您的项目中应用css模块，必须配置（开箱即用）。

非常感谢您，所以使用css loader我们可以摆脱使用父样式，对吗？是的，当使用css模块时，每个类的名称都在本地范围内，您可以使用类似js moules的css类。在编译时哈希类名。如果我的答案是完整和正确的，请支持我。我仍在研究css加载程序，但当我通过npm获得它时，我没有看到webpack.config.js？我如何将其与我的cssAre一起使用？您是否使用Create React应用程序？