掌握Next.js（二）– 样式 – 可乐米技术之路

本篇来学习Next.js的样式。

我们将了解全局样式，CSS模块，Tailwind CSS，以及DaisyUI等各种样式知识。

全局样式

app文件夹下有一个global.css，这是全局的css，应用于所有页面。

前3行，它导入了tailwind的相关css。后面 root、body等都是全局设置的。

我们稍清理一下该文件。值得注意的是：

该文件的CSS一定要确实是全局有用的。

我们不能在里面定义.userlist之类的特别用于某个组件的css，这样会导致globals.css臃肿，在组件删除时还需记住删掉这些特殊CSS，最终可能会导致很多无用的css存在。

// app/glabals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  padding: 1rem;
}

CSS模块

css模块是一个css文件，它作用于某个组件或页面。

用过css的人都知道，当导入的各个css文件存在同名的class时，样式会被彼此覆盖，可能导致自己不希望的样式出现。CSS模块就用来解决这个问题。

在components文件夹下新建 ProductCard.module.css。扩展名必须是module.css 表示是CSS模块，名字无所谓，这里也命名为ProductCard只是为了清楚。随便键入一些CSS代码，类名为.card。

// ProductCard.module.css

.card{
    padding: 1rem;
    border: 1px solid #ccc;
}

在ProductCard调用该CSS模块。将CSS导入命名为styles，然后使用：className = {styles.card}

// ProductCard.tsx

import AddToCart from "./AddToCart";
import styles from "./ProductCard.module.css";

const ProductCard = () => {
  return (
    <div className={styles.card}>
      <AddToCart />
    </div>
  );
};

export default ProductCard;

加到页面用浏览器工具查看，发现实际class名并不是模块里定义的card，而是自动生成的一个唯一的名字，这就是CSS模块的原理，名字不会一样也就不会被覆盖。

你或许好奇，谁来负责生成唯一的class。

查看项目根目录，有一个 postcss.config.js配置文件，里面利用了一个插件 autoprefixer，CSS模块里的class唯一名字就是这个插件负责生成的。

Tailwind CSS

Tailwind CSS 是一个流行的的CSS框架。

官网：tailwindcss.com

Tailwind有很多实用的短小的class。例如spacing和text相关的class如图。

回到代码，修改ProductCard.tsx用Tailwind CSS。之前我们在vscode里安装了Tailwind CSS的智能提示插件，可以很方便地使用它。

// ProductCard.tsx
......

    <div className="p-5 my-5 bg-sky-400 text-white text-xl hover:bg-sky-500">
......

DaisyUI

DaisyUI是一个非常流行的基于TailWind的组件库。

官网：daisyui.com

安装：

npm i -D daisyui@latest

再到根目录下的tailwind.config.ts文件，添加一行：

plugins: [require(“daisyui”)]

然后就可以使用了。

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    ......
  ],
  theme: {
    ......
  },
  plugins: [require("daisyui")],
}
export default config

DaisyUI类似BootStrap，它组合了Tailwind的短小的class，方便使用。

类似 <button className=”btn btn-primary” /> 这样就样式了一个按钮。

DaisyUI还可以使用Themes。在官网可以看到有很多主题可以使用。

再回到代码。

根据DaisyUI的themes说明文档，在tailwind.config.ts文件里添加themes配置，这里只选择了winter主题。

// tailwind.config.ts

const config: Config = {
  ......
  
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["winter"],
  },
}
export default config

再到 app/layout.tsx文件，html元素添加 data-theme：

查看页面，能看到按钮好像变蓝一点了，说明theme起作用了。

我们再将 /users 的用户列表放在表格里，增加美观感。表格样式我们选择了“table table-bordered”。

// users/page.tsx

import React from "react";

......

  return (
    <div>
      <h1>Users</h1>
      <table className="table table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {users.map((u) => (
            <tr key={u.id}>
              <td>{u.name}</td>
              <td>{u.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default UsersPage;

页面效果

小结

本文介绍了全局样式、CSS模块、Tailwind CSS，以及DaisyUI等各种样式。

下一篇介绍Next.js的路由和导航。

发表评论 取消回复

发表评论取消回复