相关疑难解决方法(0)

如何覆盖 CSS 模块文件中的全局 CSS?

假设在我的global.cssNext.js 项目文件中我有:

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

我还有一个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;
Run Code Online (Sandbox Code Playgroud)

Layout.module.css

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

.navbar ul {
  display: …
Run Code Online (Sandbox Code Playgroud)

css reactjs css-modules next.js

6
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

css-modules ×1

next.js ×1

reactjs ×1