nextjs系列教程(七)：CSS样式

Next.js 允许你在 JavaScript 文件中导入（import） CSS 文件。 因为 Next.js 扩展了 JavaScript 中的 import 的概念，才能让这一功能成为可能。

1. 自定义全局样式

• 将自定义的全局样式表添加到项目中，请在 pages/_app.js 文件中导入 import 样式文件

  import "../app/globals.css"; // 引入自定义全局样式文件，样式即可全局生效
  

• 这些样式将应用于你的应用程序中的所有页面和组件

2. 第三方组件库样式

• 因为第三方样式库一般也是要全局生效的。因此，在 pages/_app.js 文件中导入即可，你可以在应用程序中的任何位置从 node_modules 目录导入（import） CSS 文件，例如 bootstrap 、antd 等。

  // pages/_app.js
  import 'bootstrap/dist/css/bootstrap.css';
  

3. 配置Antd

3.1 配置组件及导入全局样式文件

• 安装 antd 组件库

  yarn add antd
  

• 在 pages/_app.jsx 中引入 antd 全局样式文件

  import "antd/dist/antd.min.js";
  

• 在组件中即可导入相关组件进行使用

  import { Button, Pagination } from "antd";
  <Button type="primary">antd</Button>
  <Pagination defaultCurrent={1} total={50} showSizeChanger />
  

3.2 语言国际化

• 在 pages/_app.js 入口文件处，进行国际化配置，增加如下内容，即可实现 antd 组件的中英文切换

  import { ConfigProvider } from "antd";
  import enUS from "antd/lib/locale/en_US";
  import zhCN from "antd/es/locale/zh_CN";
  import { useState } from "react";
  
  function App({ Component, pageProps }) {
    const [locale, setLocale] = useState("zhCN");
    return (
      <ConfigProvider
        locale={locale === "zhCN" ? zhCN : enUS}
      >
        <button
          onClick={() => {
            if (locale === "zhCN") setLocale("enUS");
            else setLocale("zhCN");
          }}
        >
          中/英
        </button>
        {/*添加公共导航：在每个 page 页面配置导航标题，那么公共导航就可以根据页面的title属性，配置当前导航内容。*/}
        <div className="nav">
          {pageProps.title ? pageProps.title : "公共导航"}
        </div>
        <Component {...pageProps} title="额外的数据" />
      </ConfigProvider>
    );
  }
  export default App;
  

3.3 自定义主题

• 在 pages/_app.js 入口文件处，进行主题配置，增加如下内容，即可实现 antd 组件的主题切换

  import { ConfigProvider } from "antd";
  function App({ Component, pageProps }) {
    const [locale, setLocale] = useState("zhCN");
    const [themeColor, setThemeColor] = useState("orange");
    return (
      <ConfigProvider
        locale={locale === "zhCN" ? zhCN : enUS}
        theme={{
          token: {
            colorPrimary: themeColor,
          },
        }}
      >
        <button
          onClick={() => {
            if (locale === "zhCN") setLocale("enUS");
            else setLocale("zhCN");
          }}
        >
          中/英
        </button>
        <button
          onClick={() => {
            setThemeColor("lightblue");
          }}
        >
          主题色
        </button>
        {/*添加公共导航：在每个 page 页面配置导航标题，那么公共导航就可以根据页面的title属性，配置当前导航内容。*/}
        <div className="nav">
          {pageProps.title ? pageProps.title : "公共导航"}
        </div>
        <Component {...pageProps} title="额外的数据" />
      </ConfigProvider>
    );
  }
  
  export default App;
  

4. css样式解决方案

Next.js 通过 [name].module.css 文件命名约定来支持 CSS 模块 。
CSS 模块通过自动创建唯一的类名从而将 CSS 限定在局部范围内。 这使您可以在不同文件中使用相同的 CSS 类名，而不必担心冲突。

4.1 css支持

• 新建 x.module.css 文件

  import styles from './x.module.css'
  
  export function Button() {
    return (
      <button
        type="button"
        className={styles.error}
      >
        Destroy
      </button>
    )
  }
  

4.2 sass支持

Next.js 允许你导入（import）具有 .scss 和 .sass 扩展名的 Sass 文件。 你可以通过 CSS 模块以及 .module.scss 或 .module.sass 扩展名来使用组件及的 Sass。

• 安装
  • npm install sass 或 yarn add sass
• 新建 x.module.scss 样式文件

  .Home {
    // 此处，使用 global 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名
    // 如果不加 :global ，所有类名就必须添加 styles.title 才可以
    :global {
      .title {
        &:nth-child(2n) {
          background-color: gray;
        }
      }
    }
  }
  

• 组件中使用样式文件

  import styles from "./index.module.scss";
  function Home() {
    return (
      <div className={styles.Home}>
         <h4 className="title">1</h4>
         <h4 className="title">2</h4>
         <h4 className="title">3</h4>
         <h4 className="title">4</h4>
  	</div>
    );
  }
  

5. css-in-js 样式解决方案

在 next 中内置了 styled-jsx，它是一个CSS-in-JS库，允许在React组件中编写CSS，CSS仅作用于组件内部。

5.1 styled-jsx 库

styled-jsx 属于样式组件化，样式以传统CSS风格写在style元素里，完全符合CSS官方规范，并且在Next.js里使用它无需另外引入库，styled-jsx已内置在Next.js中了。

• 在组件中使用 styled-jsx 设置组件样式

  export default function Profile() {
    return (
      <div className="Profile">
        <h4>个人中心</h4>
        <style jsx>{` // 局部样式
          .Profile {
            background-color: lightblue;
            height: 200px;
          }
          .Profile > h4 {
            text-align: center;
          }
        `}</style>
        <style global jsx>{` // 全局样式
          body {
            background-color: black;
          }
        `}</style>
      </div>
    );
  }
  

• 但 styled-jsx 的灵活性就有些欠缺了，虽然它用的模板字符串，可是不允许嵌入变量，只能通过className来切换CSS或者通过style属性来改变CSS，所以可以用sass或者less来编写css更加方便。
  • 安装：npm i styled-jsx-plugin-sass -D 或 yarn add styled-jsx-plugin-sass -D
  • 安装node-sass
    • 先配置淘宝镜像 yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass，否则node-sass可能安装不上
    • yarn add node-sass -D
  • 配置 babel，在根目录下新建 .babelrc 文件

    {
      "presets": ["next/babel"],
      "plugins": [["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-sass"] }]]
    }
    

  • 组件中可以编写 sass 样式了，注意：所有组件的css-in-js都必须采用sass写法了，不再支持 <style jsx>{}</style> 写法了

    import _JSXStyle from "styled-jsx/style";
    export default function Profile() {
      return (
        <div className="Profile">
          <h4>个人中心</h4>
          <_JSXStyle>{`
          .Profile {
            > h4 {
              text-align: center;
              background-color: lightblue;
              height: 200px;
            }
          }
          `}</_JSXStyle>
        </div>
      );
    }