Next.js-样式处理

#题引:我认为跟着官方文档学习不会走歪路

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 是一个三步的选择性过程,包括:

  1. 一个样式注册表用于收集渲染中的所有 CSS 规则。
  2. 新的 useServerInsertedHTML hook,用于在可能使用这些规则的任何内容之前注入规则。
  3. 一个客户端组件,在初始服务器端渲染期间用样式注册表包装你的应用。

styled-jsx(v5.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 (<html><body><StyledJsxRegistry>{children}</StyledJsxRegistry></body></html>);
}

在这里查看示例

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

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

相关文章

神经网络中的损失函数(Loss Function)

损失函数&#xff08;Loss Function&#xff09;在机器学习和深度学习中扮演着至关重要的角色&#xff0c;它是衡量模型预测值与实际值之间差异程度的函数。通过最小化损失函数&#xff0c;我们可以优化模型的参数&#xff0c;使其预测结果更加准确。 一、损失函数的定义 损失函…

Kong API Gateway 深度解析与实战指南

1. 简介 1.1 什么是Kong API Gateway&#xff1f; Kong 是一款广泛使用的开源 API Gateway 和微服务管理工具&#xff0c;最初由 Mashape&#xff08;现为 Kong Inc.&#xff09;在 2015 年推出。它基于 Nginx 和 OpenResty 构建&#xff0c;旨在为现代应用程序提供高性能、可…

Three.js渲染较大的模型之解决方案

文章目录 Three.js渲染较大的模型 解决方案视锥体剔除实例 和 遮挡剔除 实例视锥体剔除&#xff08;Frustum Culling&#xff09;实例原理概述代码示例解释 遮挡剔除&#xff08;Occlusion Culling&#xff09;实例原理概述代码示例解释 three.js 模型压缩 Three.js渲染较大的模…

AWS账户是否支持区域划分?

在云计算的世界中&#xff0c;亚马逊网络服务&#xff08;AWS&#xff09;凭借其全球化的基础设施和丰富的服务选项受到许多企业和开发者的青睐。一个常见的问题是&#xff1a;AWS账户是否支持区域划分&#xff1f;为了回答这个问题&#xff0c;我们九河云一起深入了解AWS的区域…

鼠标前进后退键改双击,键盘映射(AutoHotkey)

初衷&#xff1a; 1.大部分鼠标为不可自定义按键&#xff0c;可以自定义的又很贵。 鼠标左键是双击是很频类很高的操作&#xff0c;鼠标前进/后退按键个人感觉使用频率很低&#xff0c;因此把鼠标前进/后退改为双击还是很合适的。 2.有些短款的键盘没有Home或End键&#xff0c;…

华为海思2025届校招笔试面试经验分享

目前如果秋招还没有offer的同学&#xff0c;可以赶紧投递下面这些公司&#xff0c;都在补招。争取大家年前就把后端offer拿下。如果大家在准备秋招补录取过程中有任何问题&#xff0c;都可以私信小编&#xff0c;免费提供帮助。如果还有部分准备备战春招的同学&#xff0c;也可…

C语言解决空瓶换水问题:高效算法与实现

标题&#xff1a;C语言解决空瓶换水问题&#xff1a;高效算法与实现 一、问题描述 在一个饮料促销活动中&#xff0c;你可以通过空瓶换水的方式免费获得更多的水&#xff1a;3个空瓶可以换1瓶水。喝完这瓶水后&#xff0c;空瓶会再次变为空瓶。假设你最初拥有一定数量的空瓶&a…

MySQL乐观锁

前言 乐观锁是一种并发控制机制&#xff0c;它假设在大多数情况下不会发生冲突&#xff0c;因此在事务执行过程中不加锁。只有在提交时才会检查数据是否被其他事务修改过。如果数据在此期间被修改了&#xff0c;则当前事务会被回滚或者需要重新执行。乐观锁的主要用途和优势包…

力扣hot100-->前缀和/前缀书/LRU缓存

前缀和 1. 560. 和为 K 的子数组 中等 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2示例 2&#…

Springboot项目搭建(7)-Layout界面布局

1.概要 初步搭建了Layout界面的布局&#xff0c;其中包括左侧导航栏及其路由功能&#xff0c;和右侧头、体、脚部分的大致排版。最后在头部分中的昵称与头像替换成动态数据。 2.Layout主页布局 文件地址&#xff1a;src\views\Layout.vue 2.1 script行为模块 从elementUI中…

uniapp 安卓和ios震动方法,支持息屏和后台震动,ios和安卓均通过测试

最近使用uniapp开发震动功能&#xff0c;发现uniapp提供的 uni.vibrateLong()的方法震动比较弱&#xff0c;而且不支持息屏和后台震动。plus.ios.importClass("UIImpactFeedbackGenerator")是在网上看到的&#xff0c;这个震动也比较弱&#xff0c;ios也不支持息屏和…

JAVA项目-------医院挂号系统

1&#xff0c;项目目的 1、科室管理&#xff1a;新增科室&#xff0c;删除科室&#xff08;如果有医生在&#xff0c;则不能删除该科室&#xff09;&#xff0c;修改科室。 2、医生管理&#xff1a;录入医生信息&#xff0c;以及科室信息。修改医生信息&#xff08;主要是修改…

c语言的qsort函数理解与使用

介绍&#xff1a;qsort 函数是 C 标准库中用于排序的快速排序算法函数。它的用法非常灵活&#xff0c;可以对任意类型的元素进行排序&#xff0c;只要提供了比较函数即可。 qsort 函数原型及参数解释&#xff1a; void qsort ( void* base, //指向要排序的数组的首元素…

SpringBoot(三十八)SpringBoot-mybatis开启事务

在浏览myBatis相关文档的时候,突然想到一个小问题,到目前为止,好像我还没有使用过事务,这个不太应该。 这里我们刚好来测试一下事务叭。 一:添加pom依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifact…

#渗透测试#红蓝攻防#HW#漏洞挖掘#漏洞复现01-笑脸漏洞(vsftpd)

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

(73)脉冲幅度调制PAM调制解调通信系统的MATLAB仿真

文章目录 前言一、PAM调制的基本原理二、PAM调制的步骤三、PAM调制示例四、PAM调制的应用五、MATLAB仿真1. 仿真代码2. 仿真结果 总结 前言 PAM&#xff08;Pulse Amplitude Modulation&#xff0c;脉冲振幅调制&#xff09;是一种模拟信号到数字信号的转换方式&#xff0c;它…

算法的NPU终端移植:深入探讨与实践指南

目录 ​编辑 引言 算法选择 模型压缩 权重剪枝 量化 知识蒸馏 硬件适配 指令集适配 内存管理 并行计算 性能测试 速度测试 精度测试 功耗测试 案例分析 图像识别算法的NPU移植案例 结论 引言 在人工智能技术的浪潮中&#xff0c;神经网络处理器&#xff08;…

汽车免拆诊断案例 | 2017款捷豹F-PACE车发动机偶尔怠速不稳

故障现象  一辆2017款捷豹F-PACE车&#xff0c;搭载2.0 L GTDi发动机&#xff0c;累计行驶里程约为16万km。车主反映&#xff0c;车辆组合仪表上发动机故障灯点亮&#xff08;图1&#xff09;&#xff0c;且发动机偶尔怠速不稳。 图1 发动机故障灯点亮 故障诊断 接车后试车…

不建模,无代码,如何快速搭建VR虚拟展厅?

不建模、无代码搭建虚拟展厅&#xff0c;可以借助一些专业的虚拟展厅搭建平台或工具来实现。以下是一些具体的步骤和建议&#xff1a; 一、选择平台或工具 首先&#xff0c;需要选择一个适合的平台或工具来搭建虚拟展厅。这些平台通常提供预设的展厅模板、拖拽式编辑工具和丰富…

力扣做题笔记

1. nums.pop(nums[right]) 用法错误 在 JavaScript 中&#xff0c;Array.prototype.pop() 方法是用于移除数组中的最后一个元素&#xff0c;并返回被移除的那个元素。它不接受参数作为要移除元素的值&#xff0c;而是直接移除数组末尾的元素。 正确的做法应该是先获取要移除的索…