Javascript 如何停止使用彼此的css或如何使每个js文件使用自己的css

我对此非常困惑，尝试了从

css

到

css模块的所有方法来更改文件结构，但都没有成功

我的问题是如何在任何js文件中使用完全不同的css而不影响反应路径，就像在我的例子中使用
body
。

我有这样一个简单的文件结构

 --index.js
 --home.js
 --home.css(i change to home.module.css)
 --login.js
 --login.css(i also change to login.module.css

问题是当我在
login.css
中使用
'body'
元素并添加到
login.js
时，它会影响home.js，我不会将它导入home.js，我使用
home.css
到
home.js
中，但它会从
login.css
中获取css

这是我的文件内容

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'

ReactDOM.render(<App/>, document.getElementById('root'));

import React from 'react';
import styles from './homeStyle.module.css'


function Home() {
    return (
        <button className={styles.button}>This button</button>
    );
}

export default Home;

import React from 'react'
import styles from './login.module.css'
import Home from './home'
import { Redirect, Link, Route, Switch, BrowserRouter as Router, withRouter } from 'react-router-dom'
function Login() {
    return (
        <div className={styles.App}>
            <div>
                <p>ABC UNI</p>
                <p>Online Testing</p>
                <h1>LOGIN</h1>
            </div>

            <div className={styles.inputContainer}>
                <input type="text" placeholder="Username" />
                <i className="z"></i>
            </div>

            <div className={styles.inputContainer2}>
                <input type="password" placeholder="Password" />
                <i className="z"></i>
                <Link to='/home'>
                    <button type='button'>Login</button>
                </Link>
            </div>
        </div>
    );
}

export default Login

 body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content:left;
  align-items: center;
  background-color: hotpink;
}

 .button{
    background: fixed;
    background-color: aquamarine;
    position: relative;
    left: 500px;
}
body{
    background-color: green;
}

home.css

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'

ReactDOM.render(<App/>, document.getElementById('root'));

import React from 'react';
import styles from './homeStyle.module.css'


function Home() {
    return (
        <button className={styles.button}>This button</button>
    );
}

export default Home;

import React from 'react'
import styles from './login.module.css'
import Home from './home'
import { Redirect, Link, Route, Switch, BrowserRouter as Router, withRouter } from 'react-router-dom'
function Login() {
    return (
        <div className={styles.App}>
            <div>
                <p>ABC UNI</p>
                <p>Online Testing</p>
                <h1>LOGIN</h1>
            </div>

            <div className={styles.inputContainer}>
                <input type="text" placeholder="Username" />
                <i className="z"></i>
            </div>

            <div className={styles.inputContainer2}>
                <input type="password" placeholder="Password" />
                <i className="z"></i>
                <Link to='/home'>
                    <button type='button'>Login</button>
                </Link>
            </div>
        </div>
    );
}

export default Login

 body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content:left;
  align-items: center;
  background-color: hotpink;
}

 .button{
    background: fixed;
    background-color: aquamarine;
    position: relative;
    left: 500px;
}
body{
    background-color: green;
}

Hi Thi，在所有css被编译到一个全局名称空间之后。这就是为什么一个构件的样式应用于另一个构件的原因。js或内联样式中的css是一个不错的选择。请看下面的帖子，了解更多我需要的细节，谢谢你^^