Next.js 学习笔记（七）——样式

样式

Next.js 支持不同的应用程序样式设计方法，包括：

  • 全局 CSS：对于有传统 CSS 使用经验的人来说，使用简单且熟悉，但随着应用程序的增长，可能会导致 CSS 包过大，难以管理样式。
  • CSS 模块：创建本地范围的 CSS 类，以避免命名冲突并提高可维护性。
  • Tailwind CSS：实用工具优先的 CSS 框架，可通过组合实用工具类快速实现自定义设计。
  • Sass：一种流行的 CSS 预处理器，可通过变量、嵌套规则和混合体等功能扩展 CSS。
  • CSS-in-JS：直接在 JavaScript 组件中嵌入 CSS，实现动态和范围样式化。

CSS 模块

Next.js 内置支持使用 .module.css 扩展名的 CSS 模块。

CSS 模块通过自动创建唯一的类名来本地化 CSS 范围。这样，你就可以在不同的文件中使用相同的类名，而不必担心冲突。这种行为使 CSS 模块成为包含组件级 CSS 的理想方式。

示例

CSS 模块可以导入 app 目录下的任何文件：

// app/dashboard/layout.tsximport styles from './styles.module.css'export default function DashboardLayout({children,
}: {children: React.ReactNode
}) {return <section className={styles.dashboard}>{children}</section>
}

// app/dashboard/styles.module.css.dashboard {padding: 24px;
}

CSS 模块是一项可选功能，仅适用于扩展名为 .module.css 的文件。仍支持常规 <link> 样式表和全局 CSS 文件。

在生产过程中，所有 CSS 模块文件都将自动串联成许多经过精简和代码拆分的 .css 文件。这些 .css 文件代表应用程序中的热执行路径，可确保加载的 CSS 量最少，以便应用程序绘制。

全局样式

全局样式可导入 app 目录中的任何布局、页面或组件。

需要知道：这与 pages 目录不同，后者只能在 _app.js 文件中导入全局样式。

例如，请看名为 app/global.css 的样式表：

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

在根布局（app/layout.js）中，导入 global.css 样式表可将样式应用到应用程序中的每个路由：

// app/layout.tsx// 这些样式应用于应用程序中的每个路由
import './global.css'export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html lang="en"><body>{children}</body></html>)
}

外部样式表

第三方包发布的样式表可以导入 app 目录中的任何位置，包括共用组件：

// app/layout.tsximport 'bootstrap/dist/css/bootstrap.css'export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html lang="en"><body className="container">{children}</body></html>)
}

需要知道：外部样式表必须直接从 npm 包导入，或下载并与代码库放在一起。不能使用 <link rel="stylesheet" />。

附加功能

Next.js 包含一些附加功能，可提升添加样式的编写体验：

  • 使用 next dev 在本地运行时，本地样式表（全局或 CSS 模块）将利用快速刷新功能，在编辑保存时即时反映更改。
  • 使用 next build 为生产版本构建时，CSS 文件将被捆绑到更少的 .css 文件中，以减少检索样式所需的网络请求数量。
  • 如果禁用 JavaScript，样式仍会在生产构建（next start）中加载。不过，next dev 仍需要 JavaScript 才能启用快速刷新。

Tailwind CSS

Tailwind CSS 是一个实用优先的 CSS 框架，与 Next.js 配合使用效果极佳。

安装 Tailwind

安装 Tailwind CSS 包，运行 init 命令生成 tailwind.config.js 和 postcss.config.js 文件：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 Tailwind

在 tailwind.config.js 中，为将使用 Tailwind CSS 类名的文件添加路径：

// tailwind.config.js/** @type {import('tailwindcss').Config} */
module.exports = {content: ['./app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.'./pages/**/*.{js,ts,jsx,tsx,mdx}','./components/**/*.{js,ts,jsx,tsx,mdx}',// Or if using `src` directory:'./src/**/*.{js,ts,jsx,tsx,mdx}',],theme: {extend: {},},plugins: [],
}

你无需修改 postcss.config.js。

导入样式

添加 Tailwind CSS 指令，Tailwind 会使用这些指令将生成的样式注入到应用程序中的全局样式表中，例如：

/* app/globals.css */@tailwind base;
@tailwind components;
@tailwind utilities;

在根布局（app/layout.tsx）中，导入 globals.css 样式表，以便将样式应用到应用程序中的每个路由。

// app/layout.tsximport type { Metadata } from 'next'// 这些样式适用于应用程序中的每个路由
import './globals.css'export const metadata: Metadata = {title: 'Create Next App',description: 'Generated by create next app',
}export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html lang="en"><body>{children}</body></html>)
}

使用类

安装 Tailwind CSS 并添加全局样式后，你就可以在应用程序中使用 Tailwind 的实用类。

// app/page.tsxexport default function Page() {return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

使用 Turbopack

从 Next.js 13.1 开始，Turbopack 支持 Tailwind CSS 和 PostCSS。

CSS-in-JS

警告：服务器组件目前不支持需要运行时 JavaScript 的 CSS-in-JS 库。将 CSS-in-JS 与较新的 React 功能（例如：服务器组件和流式传输）一起使用，需要库作者支持最新版本的 React，包括并发渲染。

我们正与 React 团队合作开发上游 API，以处理 CSS 和 JavaScript 静态资源，并支持 React 服务器组件和流架构。

app 目录中的客户端组件支持以下库（按字母顺序排列）：

  • chakra-ui
  • kuma-ui
  • @mui/material
  • pandacss
  • styled-jsx
  • styled-components
  • style9
  • tamagui
  • tss-react
  • vanilla-extract

目前正在为以下组件提供支持：

  • emotion

需要知道：我们正在测试不同的 CSS-in-JS 库，并将为支持 React 18 功能和（或）app 目录的库添加更多示例。

如果你想为服务器组件设计样式，我们建议你使用 CSS 模块或其他可输出 CSS 文件的解决方案，例如：PostCSS 或 Tailwind CSS。

在 app 中配置 CSS-in-JS

配置 CSS-in-JS 是一个三步选择过程，其中包括：

  1. 样式注册表，用于收集渲染中的所有 CSS 规则。
  2. 新的 useServerInsertedHTML 钩子，用于在任何可能使用规则的内容之前注入规则。
  3. 客户端组件（Client Component），用于在初始服务器端渲染过程中使用样式注册表包装你的应用程序。
styled-jsx

在客户端组件中使用 styled-jsx，需要使用 v5.1.0。首先，创建一个新注册表：

// app/registry.tsx'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
}) {// 只创建一次具有懒惰初始状态的样式表// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-stateconst [jsxStyleRegistry] = useState(() => createStyleRegistry())useServerInsertedHTML(() => {const styles = jsxStyleRegistry.styles()jsxStyleRegistry.flush()return <>{styles}</>})return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}

然后，用注册表包裹根布局：

// app/layout.tsximport StyledJsxRegistry from './registry'export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html><body><StyledJsxRegistry>{children}</StyledJsxRegistry></body></html>)
}

这里有一个例子。

样式化组件

下面举例说明如何配置 styled-components@6 或更新版本：

首先，在 next.config.js 中启用样式化组件。

// next.config.jsmodule.exports = {compiler: {styledComponents: true,},
}

然后，使用 styled-components API 创建一个全局注册表组件，用于收集渲染过程中生成的所有 CSS 样式规则，并创建一个函数来返回这些规则。然后使用 useServerInsertedHTML 钩子将注册表中收集的样式注入根布局中的 <head> HTML 标签。

// lib/registry.tsx'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
}) {// 只创建一次具有懒惰初始状态的样式表// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-stateconst [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>)
}

用样式注册表组件包裹根布局的 chidren：

// app/layout.tsximport StyledComponentsRegistry from './lib/registry'export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html><body><StyledComponentsRegistry>{children}</StyledComponentsRegistry></body></html>)
}

这里有一个例子。

需要知道：

  • 在服务器渲染过程中，样式将被提取到全局注册表中，并刷新到 HTML 的 <head> 中。这将确保样式规则被放置在任何可能使用它们的内容之前。将来，我们可能会使用即将推出的 React 功能来确定注入样式的位置。

  • 在流式传输过程中，我们会收集每个分块的样式，并将其添加到现有样式中。在客户端水合完成后，styled-components 将像往常一样接管并注入任何进一步的动态样式。

  • 我们特别在样式注册表树的顶层使用了客户端组件，因为这样提取 CSS 规则的效率更高。它可以避免在后续服务器渲染时重新生成样式，并防止它们被发送到服务器组件有效载荷中。

  • 对于需要配置样式化组件编译的个别属性的高级用例，可以阅读我们的 Next.js 样式化组件 API 参考资料了解更多。

Sass

在使用 .scss 和 .sass 扩展名安装包后，Next.js 内置了与 Sass 集成的支持。你可以通过 CSS 模块和 .module.scssor 或 .module.sass 扩展使用组件级 Sass。

首先，安装 sass：

npm install --save-dev sass

需要知道：

Sass 支持两种不同的语法，每种语法都有自己的扩展名。.scss 扩展名要求你使用 SCSS 语法，而 .sass 扩展名则要求使用缩进语法 (“Sass”)。

如果你不确定该选择哪一种，请从 .scss 扩展名开始，它是 CSS 的超集，不需要你学习缩进语法 (“Sass”)。

自定义 Sass 选项

如果要配置 Sass 编译器，请在 next.config.js 中使用 sassOptions。

// next.config.jsconst path = require('path')module.exports = {sassOptions: {includePaths: [path.join(__dirname, 'styles')],},
}

Sass 变量

Next.js 支持从 CSS 模块文件导出的 Sass 变量。

例如，使用导出的 primaryColor Sass 变量：

// app/variables.module.scss$primary-color: #64ff00;:export {primaryColor: $primary-color;
}

// app/page.js// 映射到根 `/` 路径import variables from './variables.module.scss'export default function Page() {return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/656602.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Centos安装mysql/mariadb

Centos安装mysql/mariadb

1，yum install mysql-apt-config_0.8.12-1_all.deb 似乎后面会有冲突，不建议安装mysql了，直接mariadb吧 2， No such command: uninstall. Please use /usr/bin/yum --help It could be a YUM plugin command, try: "yum install dnf-command(uninstall)" It…
阅读更多...
鸿蒙南向开发——GN快速入门指南

鸿蒙南向开发——GN快速入门指南

运行GN(Generate Ninja) 运行gn&#xff0c;你只需从命令行运行gn&#xff0c;对于大型项目&#xff0c;GN是与源码一起的。 对于Chromium和基于Chromium的项目&#xff0c;有一个在depot_tools中的脚本&#xff0c;它需要加入到你的PATH环境变量中。该脚本将在包含当前目录的…
阅读更多...
紫外工业相机的优势与应用

紫外工业相机的优势与应用

紫外工业相机是一种特殊的相机,它能够捕捉到紫外光并把其转化为可见光。其原理主要是基于紫外光和可见光的波长不同,以及不同物质对紫外光的吸收和反射特性。紫外工业相机可有效地识别和检测出产品缺陷&#xff0c;提高产品质量&#xff0c;提升效率&#xff0c;降低成本。可应…
阅读更多...
常用芯片学习——CD4094芯片

常用芯片学习——CD4094芯片

CD4094 8位移位寄存器/3态输出缓冲器 使用说明 CD4094是由一个 8 位串行移位寄存器和一个 3 态输出缓冲器组成的 CMOS 集成电路。寄存器带有存储锁存功能&#xff0c;集成电路根据 STROBE 信号确定锁存器是否接收移位寄存器各位数据&#xff0c;数据是否由锁存器传输到 3 态输…
阅读更多...
non-void function does not return a value in all control paths

non-void function does not return a value in all control paths

错误提示&#xff1a; Line 11: Char 5: error: non-void function does not return a value in all control paths [-Werror,-Wreturn-type] 11 | } | ^ 1 error generated. 解析&#xff1a; 非 void 函数在所有的控制路径上没有返回值。 即在函数中存在某些分支&#xff0c…
阅读更多...
【教学类-35-23】20240130“红豆空心黑体”不能显示的汉字

【教学类-35-23】20240130“红豆空心黑体”不能显示的汉字

作品展示&#xff1a; 背景需求 使用红豆空心黑体制作幼儿字帖&#xff08;涂色版&#xff09; 【教学类-35-22】正式版 20240129名字字卡3.0&#xff08;15CM正方形手工纸、先男后女&#xff0c;页眉是黑体包含全名&#xff0c;名字是红豆空心黑体&#xff09;-CSDN博客文章…
阅读更多...
线性代数---------学习总结

线性代数---------学习总结

线性代数之行列式 行列式的几条重要的性质 1.某两行某两列交换位置之后&#xff0c;值变号 2.行列式转置&#xff0c;值不变 3.范德蒙德行列式&#xff0c;用不同行的公比做一系列的累乘运算 4.把某一行的行列式加到另一行上&#xff0c;利用他们之间的倍数关系&#xff0…
阅读更多...
Could not resolve host: github.com问题解决

Could not resolve host: github.com问题解决

git clone的时候发现机器无法解析github.com&#xff0c;其实应该改用ssh协议去clone&#xff0c;但是我用的是公用的机器&#xff0c;密钥对一直没配置好&#xff0c;所以也就堵死了。那么如果想让机器能解析github.com&#xff0c;&#xff08;机器本身没有ping命令&#xff…
阅读更多...
Python XPath解析html出现⋆解决方法 html出现#123；解决方法

Python XPath解析html出现⋆解决方法 html出现#123；解决方法

前言 爬网页又遇到一个坑&#xff0c;老是出现乱码&#xff0c;查看html出现的是&#数字;这样的。 网上相关的“Python字符中出现&#的解决办法”又没有很好的解决&#xff0c;自己继续冲浪&#xff0c;费了一番功夫解决了。 这算是又加深了一下我对这些iso、Unicode编…
阅读更多...
嵌入式学习第二篇——C语言基础12

嵌入式学习第二篇——C语言基础12

目录 指针 1.const指针 2.void 3.函数指针和指针函数: 1.指针函数: 2.函数指针: 4.C语言中二级指针使用场景: 1.指针数组传参时: 2.函数体内想修改函数体外指针变量值的时 构造数据类型: 数据类型: 1.基本数据类型: 1&#xff0c; int 2&#xff0c;…
阅读更多...
MySQL原理（二）存储引擎（3）InnoDB

MySQL原理（二）存储引擎（3）InnoDB

目录 一、概况&#xff1a; 1、介绍&#xff1a; 2、特点&#xff1a; 二、体系架构 1、后台线程 2、内存池&#xff08;缓冲池&#xff09; 三、物理结构 1、数据文件&#xff08;表数据和索引数据&#xff09; 1.1、作用&#xff1a; 1.2、共享表空间与独立表空间 …
阅读更多...
计算机网络——静态路由的配置实验

计算机网络——静态路由的配置实验

1.实验题目 实验四&#xff1a;静态路由的配置 2.实验目的 1.了解路由器的基本配置。 2.实现对路由器的静态配置。 3.了解Ping命令和trace的原理和使用 3.实验任务 &#xff08;1&#xff09;路由器的基本配置&#xff1a;关闭域名解释&#xff1b;设置路由器接口 IP 地…
阅读更多...
DVWA csrf代码分析

DVWA csrf代码分析

LOW级别 源码如下&#xff1a; <?phpif( isset( $_GET[ Change ] ) ) {$pass_new $_GET[ password_new ]; // 获取用户输入的新密码$pass_conf $_GET[ password_conf ]; //获取用户输入的确认密码// Do the passwords match?if( $pass_new $pass_conf ) { …
阅读更多...
网络地址相关函数一网打尽

网络地址相关函数一网打尽

这块的函数又多又乱&#xff0c;今天写篇日志&#xff0c;以后慢慢补充 1. 网络地址介绍 1.1 ipv4 1.1.1 点、分十进制的ipv4 你对这个地址熟悉吗&#xff1f; 192.168.10.100&#xff0c;这可以当做一个字符串。被十进制数字、 “ . ”分开。IP地址的知识就不再多讲…
阅读更多...
一文速学-selenium高阶操作连接已存在浏览器

一文速学-selenium高阶操作连接已存在浏览器

前言 不得不说selenium不仅在自动化测试作为不可或缺的工具&#xff0c;在数据获取方面也是十分好用&#xff0c;能够十分快速的见到效果&#xff0c;这都取决于selenium框架的足够的灵活性&#xff0c;甚至在一些基于web端的自动化办公都十分有效。 通过selenium连接已经存在…
阅读更多...
【解决】No match for argument: gflags-devel

【解决】No match for argument: gflags-devel

背景 在centos-8中安装gflags-devel&#xff0c;直接dnf安装&#xff0c;失败了。 [rootpcs2 ~]# sudo dnf -y install gflags-devel Extra Packages for Enterprise Linux 8 - x86_64 Extra Packages…
阅读更多...
SpringBoot整合RabbitMQ快速实战

SpringBoot整合RabbitMQ快速实战

目录 引入依赖 配置文件 不同模式下使用springboot收发消息 直连模式 生产者 消费者 Fanout模式 生产者 消费者 Topic主题模式 生产者 消费者 Headers模式 生产者 消费者 补充Quorum队列 生产者 消费者 引入依赖 <dependency><groupId>org.springf…
阅读更多...
什么是Vue Vue入门案例

什么是Vue Vue入门案例

一、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套 构建用户界面 的 渐进式 框架 Vue2官网&#xff1a;Vue.js 1.什么是构建用户界面 基于数据渲染出用户可以看到的界面 2.什么是渐进式 所谓渐进式就是循序渐进&#xff0c;不一定非得把V…
阅读更多...
华为radius认证

华为radius认证

组网需求 如图1所示&#xff0c;用户同处于huawei域&#xff0c;Router作为目的网络接入服务器。用户需要通过服务器的远端认证才能通过Router访问目的网络。在Router上的远端认证方式如下&#xff1a; Router对接入用户先用RADIUS服务器进行认证&#xff0c;如果认证没有响应…
阅读更多...
（M)UNITY三段攻击制作

（M)UNITY三段攻击制作

三段攻击逻辑 基本逻辑&#xff1a; 人物点击攻击按钮进入攻击状态&#xff08;bool isAttack&#xff09; 在攻击状态下&#xff0c; 一旦设置的触发器&#xff08;trigger attack&#xff09;被触发&#xff0c;设置的计数器&#xff08;int combo&#xff09;查看目前攻击…
阅读更多...
最新文章

Copyright @ 2022~2023