React 组件的样式与其他组件的样式冲突

Question

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

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

我的问题是Login和Landing组件的样式表相互冲突，并且Landing页面看起来不太好。例如，登录的背景颜色适用于登陆页面，但我不希望这样。 我只在每个组件中导入 CSS 文件，如下所示：

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

这是我如何使用样式变量的示例：

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

Answer 1

即使它很旧，我也会回答谁在后面：发生这种情况的原因是你的CSS选择器很可能具有相同的特异性，因此是外观的顺序决定了应用哪种样式。

文件夹结构中的

Login

位于

Landing

之后，因此您的捆绑程序将使

Login

的样式出现在捆绑的 CSS 中的最后，然后它将覆盖

Landing

的样式。

这个问题有很多解决方案：

• 您可以增加您想要赢得的选择器的特异性（例如，通过在 CSS 文件中重复两次该类）
• 您可以降低想要丢失的选择器的特异性（例如使用

  :where()

  ）
• 如果您同意支持哪些浏览器（例如

  @layer

  ），现在您可以使用级联层
• 等等...