假设在我的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)