Css 反应组分'；s样式与其他组件冲突'；s风格

我有这样一个应用程序组件：

const App = () => {
    return (
        <Router>
            <Route exact path='/' component={Landing} />
            <Route path='/login' component={Login} />
        </Router>
    )
}

src
   |
   |
   Landing|
   |      |
   |      Landing.js
   |      Landing.module.css
   |
   |
   Login|
   |    |
   |    Login.js
   |    Login.module.css
   |
   app.js
   index.js

import styles from './Landing.module.css'

我的问题是登录和登录组件的样式表相互冲突，并且登录页面看起来不好。例如，登录名的背景色应用于登录页，我不希望出现这种情况。 我只在每个组件的CSS文件中导入了如下内容：

const App = () => {
    return (
        <Router>
            <Route exact path='/' component={Landing} />
            <Route path='/login' component={Login} />
        </Router>
    )
}

src
   |
   |
   Landing|
   |      |
   |      Landing.js
   |      Landing.module.css
   |
   |
   Login|
   |    |
   |    Login.js
   |    Login.module.css
   |
   app.js
   index.js

import styles from './Landing.module.css'

这是我如何使用styles变量的一个示例：

return (
        <div className={styles.navBar}>
            <Link to="/">
                <img className={styles.logo} src="https://image.flaticon.com/icons/png/512/2039/2039175.png" />
            </Link>
            {loggedIn &&
                <div>
                    <button onClick={logout}>log out</button>
                    <Link className={styles.navItem} to="/users">get users</Link>
                </div>
            }
            {!loggedIn &&
                <div>
                    <Link className={styles.navItem} to="/login">log in</Link>
                    <Link className={styles.navItem, styles.btn} to="/signup">signup</Link>
                </div>
            }
        </div>
    )

返回(
{loggedIn&&
注销
获取用户
}
{！洛格丁&&
登录
报名
}
)

---

请帮助我。

如何在每个组件上导入模块css文件？如果您像

className={styles.yourCssSelector}

那样使用它，我会编辑帖子。请提供一个css文件的示例，以及您如何在comp.yes中使用它。我使用的是styles变量，你能在codesandbox.io或同等版本上提供一个可复制的例子吗？