如何在CSS模块文件中覆盖全局CSS？

How to override global CSS in a CSS module file?(如何在CSS模块文件中覆盖全局CSS？)

问题描述

假设在我的global.css文件中我有一个Next.js项目：

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

我还有一个Layout.js组件和一个Layout.module.css文件。该组件如下所示：

import styles from "../styles/Layout.module.css";
const Layout = ({ children }) => {
  return (
    <div>
      <div className={styles.navbar}>
        <div className="flex">
        <h1>Structured Safety</h1>
        <nav>
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">Demo</a> </li>
            </ul>
        </nav>
        </div>
      </div>
    </div>
  );
};

export default Layout;

，Layout.module.css为：

/* Navbar */
.navbar {
  background-color: var(--primary-color);
  color: #fff;
  height: 70px;
}

.navbar ul {
  display: flex;
}

.navbar .flex {
  justify-content: space-between;
}

这样构造的My.navbar .flex不会覆盖全局.flex类，并将h1与nav分开。如何从此组件样式覆盖我的全局样式？

css

由于.flex引用全局类，您需要使用:global选择器在推荐答案模块中将其作为目标。

/* Layout.module.css */

.navbar :global(.flex) {
    justify-content: space-between;
}

这篇关于如何在CSS模块文件中覆盖全局CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！