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

Question

可以在我的global.css next.js项目的文件中说：

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

我也有一个layout.js component和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 is：

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

.navbar ul {
  display: flex;
}

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

这样结构，我的.navbar .flex .flex不会覆盖全局.flex 类，然后将H1从nav拆分。我如何从这种组件样式中完成覆盖全球风格？

Answer 1

由于.flex是指您需要使用：Global选择器在CSS模块中定位它。

/* Layout.module.css */

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

或使用替代语法。

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

Answer 2

/** CSS模块文件**/

.classname :global(.globalClass) { css properties }

.classname {
 :global {
  .globalClass { css properties }
 }
}

Answer 3

在nextjs中，当你做出反应
从“__。CSS” 样式成为变量，因此您必须在HTML中使用它才能生效。

当前，您尚未使用layout.module.css中的任何样式，如果要使用CSS，则将您的html更改为：＆lt; div className = {styles.navbar}这样的..