国产香蕉尹人在线视频播放,色婷婷精品综合久久狠狠

如何在應(yīng)用程序中使用 CSS

Next.js 提供了多種在應(yīng)用程序中使用 CSS 的方法，包括：

[toc]

CSS 模塊
全局 CSS
Tailwind CSS
Sass
CSS-in-JS
外部樣式表

本頁(yè)將指導(dǎo)你如何使用這些方法。

CSS 模塊

CSS 模塊通過(guò)生成唯一的類名來(lái)局部作用域 CSS。這允許你在不同文件中使用相同的類，而不用擔(dān)心沖突。

要開(kāi)始使用 CSS 模塊，創(chuàng)建一個(gè)擴(kuò)展名為 .module.css 的新文件，并將其導(dǎo)入到 app 目錄中的任何組件中：

.blog {
  padding: 24px;
}

import styles from './styles.module.css'


export default function Page({ children }: { children: React.ReactNode }) {
  return <main className={styles.blog}>{children}</main>
}

全局 CSS

你可以使用全局 CSS 在整個(gè)應(yīng)用程序中應(yīng)用樣式。

要使用全局樣式，創(chuàng)建一個(gè)新 CSS 文件，例如 app/global.css：

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

在根布局（app/layout.js）中導(dǎo)入該文件，以將樣式應(yīng)用于應(yīng)用程序中的每個(gè)路由：

// 這些樣式適用于應(yīng)用程序中的每個(gè)路由
import './global.css'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body>{children}</body>
    </html>
  )
}

小貼士：全局樣式可以導(dǎo)入到 app 目錄中的任何布局、頁(yè)面或組件中。但是，由于 Next.js 使用 React 內(nèi)置的樣式表支持與 Suspense 集成，這種內(nèi)置支持目前在你導(dǎo)航到不同路由時(shí)不會(huì)移除樣式表。因此，我們建議將全局樣式用于真正全局的 CSS，而將 CSS 模塊用于作用域 CSS。

Tailwind CSS

Tailwind CSS 是一個(gè)以實(shí)用程序?yàn)橹鞯?CSS 框架，與 Next.js 無(wú)縫集成。

安裝 Tailwind

要開(kāi)始使用 Tailwind，安裝必要的 Tailwind CSS 包：

npm install -D tailwindcss @tailwindcss/postcss postcss

配置 Tailwind

在項(xiàng)目的根目錄中創(chuàng)建一個(gè) postcss.config.mjs 文件，并將 @tailwindcss/postcss 插件添加到你的 PostCSS 配置中：

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

使用 Tailwind

將 Tailwind 指令添加到你的全局樣式表中：

然后，在根布局中導(dǎo)入樣式：

import type { Metadata } from 'next'


// 這些樣式適用于應(yīng)用程序中的每個(gè)路由
import './globals.css'


export const metadata: Metadata = {
  title: '創(chuàng)建 Next App | 編程獅（w3cschool.cn）',
  description: '由 create next app 生成',
}


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body>{children}</body>
    </html>
  )
}

最后，你可以在應(yīng)用程序中開(kāi)始編寫(xiě) Tailwind 的實(shí)用程序類。

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, W3Cschool!</h1>
}

Sass

Next.js 使用 .scss 和 .sass 擴(kuò)展名和語(yǔ)法與 Sass 集成。

你還可以通過(guò) CSS 模塊和 .module.scss 或 .module.sass 擴(kuò)展名使用組件級(jí) Sass。

安裝 Sass

要開(kāi)始使用 Sass，安裝 sass 包：

npm install --save-dev sass

自定義 Sass 選項(xiàng)

如果你想配置 Sass 選項(xiàng)，請(qǐng)?jiān)?next.config.js 中使用 sassOptions 選項(xiàng)。

import type { NextConfig } from 'next'


const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}


export default nextConfig

CSS-in-JS

警告：需要運(yùn)行時(shí) JavaScript 的 CSS-in-JS 庫(kù)目前不支持在 React 服務(wù)器組件中使用。在使用 CSS-in-JS 時(shí)，需要庫(kù)作者支持 React 的最新版本，例如服務(wù)器組件和流式傳輸。

以下庫(kù)在 app 目錄的客戶端組件中受支持（按字母順序排列）：

ant-design
chakra-ui
@fluentui/react-components
kuma-ui
@mui/material
@mui/joy
pandacss
styled-jsx
styled-components
stylex_
tamagui
tss-react
vanilla-extract

以下庫(kù)目前正在進(jìn)行支持工作：

emotion

如果你想為服務(wù)器組件添加樣式，我們建議使用 CSS 模塊或輸出 CSS 文件的其他解決方案，例如 Tailwind CSS。

配置 CSS-in-JS

要配置 CSS-in-JS，你需要：

創(chuàng)建一個(gè)樣式注冊(cè)表來(lái)收集渲染中的所有 CSS 規(guī)則。
使用 useServerInsertedHTML 鉤子在可能使用它們的內(nèi)容之前注入規(guī)則。
創(chuàng)建一個(gè)客戶端組件，在初始服務(wù)器端渲染期間用樣式注冊(cè)表包裹你的應(yīng)用。

`styled-jsx`

要為你的應(yīng)用程序配置 styled-jsx，創(chuàng)建一個(gè)新的注冊(cè)表：

'use client'


import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'


export default function StyledJsxRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // 只在初始狀態(tài)下創(chuàng)建一次樣式表
  const [jsxStyleRegistry] = useState(() => createStyleRegistry())


  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles()
    jsxStyleRegistry.flush()
    return <>{styles}</>
  })


  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}

然后，在根布局中用注冊(cè)表包裹：

import StyledJsxRegistry from './registry'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

`styled-components`

要使用 styled-components，在 next.config.js 中啟用它：

import type { NextConfig } from 'next'


const nextConfig: NextConfig = {
  compiler: {
    styledComponents: true,
  },
}


export default nextConfig

然后，使用 styled-components API 創(chuàng)建一個(gè)全局注冊(cè)表組件來(lái)收集渲染期間生成的所有 CSS 樣式規(guī)則，以及一個(gè)函數(shù)來(lái)返回這些規(guī)則。然后使用 useServerInsertedHTML 鉤子將注冊(cè)表中收集的樣式注入到根布局的 <head> HTML 標(biāo)簽中。

'use client'


import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'


export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // 只在初始狀態(tài)下創(chuàng)建一次樣式表
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())


  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })


  if (typeof window !== 'undefined') return <>{children}</>


  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

用樣式注冊(cè)表組件包裹根布局的 children：

import StyledComponentsRegistry from './lib/registry'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

外部樣式表

由外部包發(fā)布的樣式表可以導(dǎo)入到 app 目錄中的任何位置，包括共置組件：

import 'bootstrap/dist/css/bootstrap.css'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body className="container">{children}</body>
    </html>
  )
}

外部樣式表必須直接從 npm 包導(dǎo)入或下載并與你的代碼庫(kù)共置。你不能使用 <link rel="stylesheet" />。

API 參考

閱讀 API 參考，了解有關(guān)本頁(yè)中提到的功能的更多信息。

sass選項(xiàng)
配置 Sass 選項(xiàng)。
Next.js 編譯器
Next.js Compiler，用 Rust 編寫(xiě)，用于轉(zhuǎn)換和縮小 Next.js 應(yīng)用程序。

Next.js 應(yīng)用程序中使用 CSS：新手指南