网站建设项目招标文件,我要自学网视频教程,免费甜点网站模板下载,张裕网站建设的目标#题引#xff1a;我认为跟着官方文档学习不会走歪路
Next.js 支持多种为应用程序添加样式的方法#xff0c;包括#xff1a;
CSS Modules#xff1a;创建局部作用域的 CSS 类#xff0c;避免命名冲突并提高可维护性。全局 CSS#xff1a;使用简单#xff0c;对于有传统…#题引我认为跟着官方文档学习不会走歪路
Next.js 支持多种为应用程序添加样式的方法包括
CSS Modules创建局部作用域的 CSS 类避免命名冲突并提高可维护性。全局 CSS使用简单对于有传统 CSS 经验的人来说很熟悉但可能导致 CSS 包体积较大且随着应用程序增长难以管理样式。Tailwind CSS一个实用优先的 CSS 框架通过组合实用类可以快速创建自定义设计。CSS预处理器比如Sass通过变量、嵌套规则和混合等特性扩展了 CSS 功能。CSS-in-JS直接在 JavaScript 组件中嵌入 CSS实现动态和作用域样式。
一CSS Modules 和 全局CSS
CSS Modules 通过自动创建唯一的类名来实现 CSS 的局部作用域。这使得你可以在不同文件中使用相同的类名而不用担心冲突。这种特性使 CSS Modules 成为引入组件级 CSS 的理想方式。
Next.js 内置支持使用 .module.css 扩展名的 CSS Modules。 CSS Modules 仅对扩展名为 .module.css 和 .module.sass 的文件启用。
在生产环境中所有 CSS Module 文件会自动合并成多个经过代码分割和压缩的 .css 文件。这些 .css 文件代表了应用程序中的热执行路径确保只加载应用程序渲染所需的最少 CSS。
而全局样式可以在 app 目录下的任何布局、页面或组件中导入例如在根布局 (app/layout.js) 中导入 global.css 样式表以将样式应用到应用程序的每个路由。
Next.js 在生产构建期间通过自动分块合并样式表来优化 CSS。CSS 的顺序是由_你在应用程序代码中导入样式表的顺序_决定的。因此官方建议
只在单个 JS/TS 文件中导入一个 CSS 文件。 如果使用全局类名在同一个文件中按照你想要应用的顺序导入全局样式。优先使用 CSS Modules 而不是全局样式。 为你的 CSS modules 使用一致的命名约定。例如使用·name.module.css 而不是 name.tsx。将共享样式提取到单独的共享组件中。如果使用 Tailwind最好在文件顶部导入样式表最好是在根布局中。关闭任何会自动对导入进行排序的 linters/formatters例如ESLint 的 sort-import
你可以使用 next.config.js 中的 cssChunking 选项来控制 CSS 如何分块。
const nextConfig {experimental: {cssChunking: loose, // 默认值},
}‘loose’ (默认值)Next.js 会尽可能合并 CSS 文件通过导入顺序确定文件之间的显式和隐式依赖关系以减少分块数量从而减少请求数量。‘strict’Next.js 将按照文件中导入的正确顺序加载 CSS 文件这可能会导致更多的分块和请求。(遇到意外的 CSS 行为时使用)
二Tailwind CSS
创建新的 Next.js 应用程序可以选择使用Tailwind CSS它会为你自动设置好。 或者手动添加,通过以下命令安装并生成tailwind.config.js 和 postcss.config.js 文件。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p在tailwind.config.ts可以添加将使用 Tailwind 类名的文件路径。 你不需要修改 postcss.config.js。
可以将 Tailwind 用于注入其生成样式的 Tailwind CSS 指令 添加到应用程序中的全局样式表中例如
tailwind base;
tailwind components;
tailwind utilities;三CSS预处理器
Next.js 在安装相关包后内置支持使用 .scss 和 .sass 扩展名集成 Sass。你可以通过 CSS Modules 使用组件级的 Sass使用 .module.scss 或 .module.sass 扩展名。 首先安装
npm install --save-dev sass如果你想配置 Sass 选项可以在 next.config 中使用 sassOptions。 Sass 有不同的实现方式最常用的有两种
Node Sass基于 LibSass 的实现使用 C 编写性能较高但已经不再维护。Dart Sass基于 Dart 语言的实现是 Sass 官方推荐的实现支持最新的 Sass 特性。 默认情况下Next.js 使用 sass 包即Dart Sass
Next.js 支持从 CSS Module 文件导出 Sass 变量。
例如使用导出的 primaryColor Sass 变量
四CSS-in-JS
CSS-in-JS 是一种将 CSS 样式与 JavaScript 代码结合的方式允许在组件内定义样式。
需要运行时 JavaScript 的 CSS-in-JS 库目前不支持在服务器组件中使用。在新的 React 特性如服务器组件和流式传输中使用 CSS-in-JS需要库作者支持最新版本的 React包括 并发渲染。 以下库支持在 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
如果你想为服务器组件添加样式官方推荐使用 CSS Modules 或其他输出 CSS 文件的解决方案如 PostCSS 或 Tailwind CSS
配置 CSS-in-JS 是一个三步的选择性过程包括
一个样式注册表用于收集渲染中的所有 CSS 规则。新的 useServerInsertedHTML hook用于在可能使用这些规则的任何内容之前注入规则。一个客户端组件在初始服务器端渲染期间用样式注册表包装你的应用。
以styled-jsxv5.1.0 或更高版本为例 首先创建一个新的注册表
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;
}然后用注册表包装你的 根布局
import StyledJsxRegistry from ./registry;export default function RootLayout({children,
}: {children: React.ReactNode;
}) {return (htmlbodyStyledJsxRegistry{children}/StyledJsxRegistry/body/html);
}在这里查看示例
