Next.js CSS 文件

.moudle.css

Next.js中CSS样式文件以.module.css后缀结尾。

使用

以.module.css结尾的文件可以导入styles对象。

import styles from "../portal.module.css";

export default function Header() {
    return (
        <div className={styles.header}>
            <div>Home</div>
            <div>Search</div>
            <div>Topic</div>
            <div>Data</div>
        </div>
    )
}

portal.module.css样式文件。

.header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer {

}

说明

也可以在layout.tsx中导入，可以在全局或者路由分组中多组件共用。

// 路由分组中导入样式文件 @/app/(client)/(portal)/layout.tsx
import "@/app/(client)/(portal)/portal.css"