鲜为人知的是,Next.js提供了许多在应用程序中支持CSS的方法。无论你喜欢实用程序CSS及其类还是更喜欢CSS-in-JS,Next.js都能满足您的需求。在本教程中,您将发现在 Next.js 应用程序中实现样式设置的几种方法。让我们实现一个样式文本,当用户将其悬停在一起时,该文本将变为红色:

文本突出显示

在Next中使用全局 CSS 样式.js

在 Next.js 应用程序中编写 CSS 的最简单方法是通过其全局样式表)。每个新创建的Next.js项目都带有一个文件夹,其中有一个样式表。styles``global.css

因此,您可以立即开始编写CSS,而无需进行任何设置。例如,在 中,您可以添加以下内容:styles/global.css

1
2
3
4
5
6
7
8
    .paragraph {
      font-size: 16px;
      text-align: center;
    }

    .paragraph:hover {
      color: red;
    }

然后,在 中创建的样式将应用于整个应用程序。global.css

为此,只能在组件初始化 Next.js 页中的所有页时导入此样式表。_app.js,``App

在新的 Next.js 项目中,它已为您完成,但如果文件夹中还没有文件,请创建一个。完成后,导入新的全局样式表:_app.js``pages

1
2
3
4
5
6
7
8
//In _app.js, import your global stylesheets
    import '../styles/globals.css'

    function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />
    }

    export default MyApp

然后,可以在应用程序中使用这些类。例如,在您的主页上:pages/index.js

1
2
3
4
5
    export default function Home() {
      return (
        <p className="paragraph">I am styled with a global css stylesheet</p>
      )
    }

在 CSS 中使用全局样式的优点

  • 无需设置
  • 非常适合 POC 等小型项目

缺点

  • 所有样式都包含在单个文件中
  • 随着项目的增长,很难扩展

将 CSS 模块与 Next 一起使用.js

与刚开始时全局样式表一样方便,但随着应用程序的增长,此文件的可管理性可能会降低。

此外,Next.js 是一个基于组件的框架,这意味着可以更轻松地拆分相应组件的样式。例如,如果您的页脚有一个组件,则导入包含此组件样式的样式表会更容易,但仅此而已。输入 CSS 模块!

如果您不熟悉,CSS 模块允许您通过为特定于样式的组件创建文件来隔离 CSS。它们非常易于使用,因为它们是简单的CSS,但具有扩展名。与前面的方法一样,它不需要设置,并且可以在全局样式表之外使用。module.css

下面是一个示例:Home.module.css

1
2
3
4
5
6
7
8
9
    //Home.module.css
    .paragraph {
      font-size: 16px;
      text-align: center;
    }

    .paragraph:hover {
      color: red;
    }

在组件中,您可以导入样式表并使用它:pages/index.js

1
2
3
4
5
6
  import styles from '../styles/Home.module.css'
   export default function Home() {
      return (
        <p className={styles.paragraph}>I am styled with CSS modules</p>
      )
    }

使用 CSS 模块进行样式设置的优点

  • 无需设置
  • 组件可以拆分样式
  • 可与全局样式一起使用
  • 与全局样式不同,避免了类之间的冲突

缺点

  • 无动态样式(例如,基于加载、错误、成功等状态)

Next.js Sass 的造型

如果基本的CSS还不够,你发现自己正在寻找一个CSS框架,那么Sass就是最好的选择。它将自己描述为“具有超能力的CSS”,是一个与CSS兼容的流行框架,并提供了许多很酷的功能,如变量,嵌套和混合。下面是我们示例项目的 GitHub 存储库

将 Sass 与 Next.js 一起使用非常简单。您所要做的就是安装库:

1
2
3
   npm install sass
    # or
    yarn add sass

完成后,您可以开始编写 Sass 代码。不要忘记 或 文件扩展名!下面是 Sass 代码的一个示例:.scss``.sass``styles/Home.module.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    //Home.module.scss
    $hover-color: red;

    .paragraph {
      font-size: 16px;
      text-align: center;
    }

    .paragraph:hover {
      color: $hover-color;
    }

与使用 CSS 模块类似,一旦我们完成 CSS 的编写,我们将导入新文件来设置应用程序的样式。

1
2
3
4
5
6
  import styles from '../styles/Home.module.scss'
    export default function Home() {
      return (
        <p className={styles.paragraph}>I am styled with SASS</p>
      )
    }

优点:

  • 使用Next.js轻松设置
  • 兼容 CSS
  • 有趣的功能,满足复杂的样式需求,如变量,嵌套等。

缺点:

  • 浪费时间学习 SASS 的新功能

More complex than CSS使用 Styled-JSX 进行样式设置

前三种方法涵盖了最好的样式选项,如果你更喜欢实用工具CSS。但也许你更像是一个CSS-in-JS的人。在这种情况下,Styled-JSX可能就在你的小巷里。

Styled-JSX由Next.js的创始人Vercel构建,允许开发人员在他们的JavaScript代码中编写CSS。无需进行任何设置,开箱即用。

下面是 Styled-JSX 的一个示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    export default function Home() {
      return (
        <div className="paragraph">
          <style jsx>{`
            .paragraph {
              font-size: 16px;
              text-align: center;
            }

            .paragraph:hover {
              color: red;
            }
          `}</style>
          <p>I am a component styled with Styled-JSX</p>
        </div>
      )
    }

将 Sass 与 Next 一起使用的优点.js

  • 无需设置
  • 动态样式
  • 可移植性:您的代码(CSS和JS)包含在一个文件中,因此可以轻松移动

缺点

  • 不像其他 CSS-in-JS 库那样多的支持(Github 上有 7k 颗星,而样式组件有 36k 颗星)
  • 混合 CSS 和 JS 时,代码可读性可能更加困难

使用带样式的组件

Styled-JSX 开始时可能很方便,但随着应用程序的增长很难调试。因此,您可能会受到样式组件的诱惑。

Styled-components非常实用,因为它是为React创建的。它允许开发人员创建自动注入样式的组件。您还可以使用 props 进行动态样式设置(即,用于禁用或悬停状态)。在此处查看示例项目。

要在 Next.js 中使用它,请先安装库:

1
2
3
    npm i styled-components
    # or
    yarn add styled-components

使用 styled 组件的唯一缺点是它是为 React 制作的,这意味着它适用于客户端渲染。目前,不支持开箱即用的服务器端呈现。

但是,通过创建新文件并添加以下内容可以轻松解决此问题: pages/_document.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 import Document, { Head, Html, Main, NextScript } from 'next/document'
    import { ServerStyleSheet } from 'styled-components'

    export default class MyDocument extends Document {
      render() {
        return (
          <Html lang="en">
            <Head></Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        )
      }

      static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheet()
        const originalRenderPage = ctx.renderPage

        try {
          ctx.renderPage = () =>
            originalRenderPage({
              enhanceApp: (App) => (props) =>
                sheet.collectStyles(<App {...props} />),
            })

          const initialProps = await Document.getInitialProps(ctx)
          return {
            ...initialProps,
            styles: (
              <>
                {initialProps.styles}
                {sheet.getStyleElement()}
              </>
            ),
          }
        } finally {
          sheet.seal()
        }
      }
    }

完成后,您可以将库导入到组件中并开始使用它。例如,在 中,您可以为主页创建一个带样式的组件:pages/index.js``Paragraph

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 import styled from 'styled-components'
    const Paragraph = styled.p`
      font-size: 16px;
      text-align: center;

      &:hover {
        color: ${props => props.hoverColor};
      }
    `

    export default function Home() {
      return <Paragraph hoverColor="red">I am a component made with Styled Components</Paragraph>
    }

将样式化组件与 Next 一起使用的优点.js

  • 使用 React 构建,并拥有大量的社区支持
  • 基于道具的动态造型
  • 像 React 组件一样可定制和可重用(即,而不是<Title />``<h2 className="title"/>)

缺点

  • 服务器端渲染框架所需的其他配置,如 Next.js
  • 有点学习曲线习惯功能
  • 编译时,样式组件类变得随机(即),使调试更加困难css-1kybr8i

情感

另一个考虑到 React 的 CSS 框架是 Emotion。它提供了一个CSS prop(将样式直接传递给元素)和样式化的组件。Emotion 的另一个好处是服务器端渲染开箱即用。在这里查看GitHub

要在 Next.js 应用程序中使用 Emotion,您首先需要安装该库:

1
2
3
    npm install --save @emotion/react
    #or
    yarn add @emotion/react

要使用带样式的组件,还应安装所需的库:

1
2
3
    npm install --save @emotion/styled
    # or
    yarn add @emotion/styled

然后,您可以直接开始编写带样式的组件。下面是一个组件示例: pages/index.js``Paragraph

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    import styled from '@emotion/styled'

    const Paragraph = styled.p`
      font-size: 16px;
      text-align: center;

      &:hover {
        color: ${props => props.hoverColor};
      }
    `

    export default function Home() {
      return <Paragraph hoverColor="red">I am a component made with Emotion (Styled Components)</Paragraph>
    }

使用情感的优点

  • 服务器端支持和轻松设置Next.js
  • 通过@emotion/样式,您可以获得样式化组件的所有优点
  • 许多包满足不同的需求:CSS,样式,Jest,本机等。

缺点

  • 与样式组件一样,Emotion会生成随机的类名,这使得使用元素检查器进行调试变得更加困难。
  • 一些学习曲线习惯功能

样式Next.js与TailwindCSS

使用PostCSS,Next.js还为流行的工具(如Tailwind CSS)提供支持。通过将Tailwind安装为PostCSS插件,它将扫描您的代码并为您生成正确的样式表。它不仅速度快,而且还附带了一个实用程序类列表供您选择(即间距,文本大小等)。

要将其与 Next.js 一起使用,请从安装 开始,并作为对等依赖项:tailwindcss``postcss``autoprefixer

1
    npm install -D tailwindcss postcss autoprefixer

运行 init 以生成所需的文件:tailwindcss

1
    npx tailwindcss init -p

此命令生成了两个文件:

  • postcss.config.js,
    

    您不需要触摸

  • tailwind.config.js

在后者中,添加模板路径。这些配置将告诉Tailwind CSS扫描哪些代码来生成样式表:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    module.exports = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

在 中,添加 Tailwind CSS 指令:styles/global.css

1
2
3
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

如果您使用的是新创建的 Next.js 项目,这将为您完成,但是,如果没有,请确保导入样式表:pages/_app.js``styles/global.css

1
2
3
4
5
6
7
    import '../styles/globals.css'

    function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />
    }

    export default MyApp

您现在可以开始使用Tailwind CSS。在 中,如果要创建具有悬停状态的居中段落,可以按如下方式操作:pages/index.js

1
2
3
4
5
6
7
    export default function Home() {
      return (
        <p class="text-center text-lg hover:text-red-600">
          I am a component made with Tailwind CSS
        </p>
      )
    }

使用TailwindCSS的优点

  • 许多预定义的类,无论是填充,边距,颜色还是其他
  • 熟悉类后,样式设置过程将变得更快
  • 编译后的 CSS 通过删除未使用的 CSS 自动优化

缺点

  • 没有内容与结构的分离,因为CSS和HTML是组合在一起的
  • 学习所有不同课程所需的时间

结论

选择样式选项取决于许多因素:项目的大小,时间以及大多数个人偏好。值得庆幸的是,无论你喜欢实用型CSS还是CSS-in-JS,Next.js都提供了对CSS的内置支持。

在本教程中,您发现了其中的一些。首先,您学习了如何使用全局样式表或 CSS 模块编写 CSS。对于具有更复杂需求的开发人员,您还将了解如何将 Sass 与 Next.js。

然后,对于那些喜欢CSS-in-JS的人,我们介绍了一些方法,如Styled-JSX,styled-components和Emotion。

最后,您还了解到Next.js为带有PostCSS的Tailwind CSS等工具提供支持,这有利于希望访问具有数千个预构建CSS类的设计系统的开发人员。感谢您的阅读!

LogRocket:全面了解生产环境 Next.js应用

调试 Next 应用程序可能很困难,尤其是当用户遇到难以重现的问题时。如果您对监视和跟踪状态,自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间感兴趣,请尝试LogRocket img LogRocket Dashboard 免费试用横幅

LogRocket就像一个用于Web和移动应用程序的DVR,从字面上记录Next应用程序上发生的一切。您不必猜测问题发生的原因,而是可以汇总并报告问题发生时应用程序所处的状态。LogRocket 还会监控应用的性能,使用客户端 CPU 负载、客户端内存使用情况等指标进行报告。

LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。LogRocket 记录 Redux 存储中的所有操作和状态。

实现 Next.js 应用调试方式的现代化 — 免费开始监控