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-state
  const [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>
  );
}

在这里查看示例

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

QT:多ui界面显示

文章目录 1.多ui界面添加2.跳转函数3.返回函数4.Qt5源码工程5.模态显示 1.多ui界面添加 最终生成这个目录 2.跳转函数 void MainWindow::on_pushButton_clicked() {//this->setWindowModality(Qt::WindowModal);test1 *t1 new test1();t1->setParentData(this);this-…

利用大数据和人工智能彻底改变移动测试

移动应用程序是按需提供的公司品牌。它是了解组织提供的任何服务或产品的窗口。在 Kobiton&#xff0c;他们明白这一点 — 他们的使命是通过测试改进移动应用程序。Kobiton 是一个移动测试平台&#xff0c;允许客户在世界任何地方对真实移动设备执行手动和自动测试。它最初是一…

Ubuntu环境中RocketMQ安装教程

参考教程 https://blog.csdn.net/weixin_56219549/article/details/126143231 1、安装JDK&#xff0c;并配置环境变量&#xff08;略&#xff09; 2、下载RocketMQ安装包 RocketMQ下载地址&#xff0c;选择二进制包下载 unzip rocketmq-all-5.0.0-ALPHA-bin-release.zip 使…

基于JAVA的旅游网站系统设计

摘 要 自改革开放以来&#xff0c; 我国国内旅游业发展迅速&#xff0c;覆盖面广&#xff0c;但总的来说仍然处于一种低消费、大众化、低水平、 中近距离旅游的状况。旅游基础设备、服务设施建设发展很快&#xff0c;但仍然不能适应国内旅游发展速度的要求。我国的 旅游业是在…

服务器数据恢复—raid6阵列硬盘被误重组为raid5阵列的数据恢复案例

服务器存储数据恢复环境&#xff1a; 存储中有一组由12块硬盘组建的RAID6阵列&#xff0c;上层linux操作系统EXT3文件系统&#xff0c;该存储划分3个LUN。 服务器存储故障&分析&#xff1a; 存储中RAID6阵列不可用。为了抢救数据&#xff0c;运维人员使用原始RAID中的部分…

论文笔记-WWW2024-ClickPrompt

论文笔记-WWW2024-ClickPrompt: CTR Models are Strong Prompt Generators for Adapting Language Models to CTR Prediction ClickPrompt: CTR模型是大模型适配CTR预测任务的强大提示生成器摘要1.引言2.预备知识2.1传统CTR预测2.2基于PLM的CTR预测 3.方法3.1概述3.2模态转换3.…

循环神经网络(RNN)详解

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

【微服务】Nacos

一、安装 1、官网地址&#xff1a;https://nacos.io/download/nacos-server/ 2、启动&#xff1a;找到bin目录下的startup.cmd双击启动&#xff0c;或者打开一个命令窗口输入&#xff1a; startup.cmd -m standalone双击启动后如下&#xff1a;可以访问控制台地址 访问后的…

混沌工程/混沌测试/云原生测试/云平台测试

背景 私有云/公有云/混合云等具有复杂&#xff0c;分布式&#xff0c;环境多样性等特点&#xff0c;许多特殊场景引发的线上问题很难被有效发现。所以需要引入混沌工程&#xff0c;建立对系统抵御生产环境中失控条件的能力以及信心&#xff0c;提高系统面对未知风险得能力。 …

DM-VIO(ROS)+t265配置运行记录(ubuntu18.04+ros melodic)

在工作中需要对DM-VIO算法进行测试&#xff0c;于是配置并记录了一下&#xff1a; 首先运行ros接口的dm-vio&#xff0c;一定要先配置源码 https://github.com/lukasvst/dm-vio在这个网址把源码下载下来并解压&#xff0c;并安装一下依赖&#xff1a; sudo apt-get install …

自动化运维(k8s)之微服务信息自动抓取:namespaceName、deploymentName等全解析

前言&#xff1a;公司云原生k8s二开工程师发了一串通用性命令用来查询以下数值&#xff0c;我想着能不能将这命令写成一个自动化脚本。 起初设计的 版本一&#xff1a;开头加一条环境变量&#xff0c;执行脚本后&#xff0c;提示输入&#xff1a;需要查询的命名空间&#xff0c…

【数据分析】布朗运动(维纳过程)

文章目录 一、概述二、数学布朗运动2.1 数学定义2.2 布朗运动的数学模型2.21 标准布朗运动2.22 布朗运动的路径2.23 布朗运动的方程 三、布朗运动在金融学中的应用四、数学构造&#xff08;以傅里叶级数为例&#xff09;4.1 傅里叶级数的基本思想4.2 构造布朗运动 一、概述 布…

Mybatis Plus 增删改查方法(一、增)

先定义一个简单的测试表&#xff0c;执行脚本如下&#xff1a; create table user(id bigint primary key auto_increment,name varchar(255) not null,age int not null default 0 check (age > 0) ); 根据Spingbootmybatisplus的结构根据表自行构建结构&#xff0c;大致…

基于Matlab的图像去噪算法仿真(二)

在信息化的社会里&#xff0c;图像在信息传播中所起的作用越来越大。所以&#xff0c;消除在图像采集和传输过程中而产生的噪声&#xff0c;保证图像受污染度最小&#xff0c;成了数字图像处理领域里的重要部分。 本文主要研究分析邻域平均法、中值滤波法、维纳滤波法及模糊小…

鸿蒙Next星河版基础代码

目录&#xff1a; 1、鸿蒙箭头函数的写法2、鸿蒙数据类型的定义3、枚举的定义以及使用4、position绝对定位及层级zIndex5、字符串的拼接转换以及数据的处理(1)字符串转数字(2)数字转字符串(3)布尔值转换情况(4)数组的增删改查 6、三元表达式7、鸿蒙for循环的几种写法7.1、基本用…

Node.js的url模块与querystring模块

新书速览|Vue.jsNode.js全栈开发实战-CSDN博客 《Vue.jsNode.js全栈开发实战&#xff08;第2版&#xff09;&#xff08;Web前端技术丛书&#xff09;》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 4.3.1 http模块——创建HTTP服务器、客户端 要使用http模块&#xff0…

Conda 管理python开发环境

同步发布于我的网站 &#x1f680; 故事起因: 在公司使用Requests多任务并行开发时遇到了问题&#xff0c;使用 ProcessPoolExecutor 时不能正常发出网络请求&#xff0c;会卡在网络请求发不出去&#xff0c;但是善于用 ThreadPoolExecutor 时是可以的,纠结了很久&#xff0c;一…

LLamafactory 批量推理与异步 API 调用效率对比实测

文章目录 背景数据集构造LLamafactory 批量推理yaml 参数设置批量推理启动 LLamafactory API 部署结论项目开源 背景 在阅读 LLamafactory 的文档时候&#xff0c;发现它支持批量推理: 推理.https://llamafactory.readthedocs.io/zh-cn/latest/getting_started/inference.html…

Android通过摄像头检测心率

话不多说&#xff0c;先看效果 Android通过摄像头测量心率 借鉴文章如下 Android通过摄像头计算心率、心率变异性 该文章的核心功能点已经很全了&#xff0c;为了方便使用&#xff0c;我这边整理成了工具类可直接使用 该功能全网文章还是比较少的&#xff0c;还是要感谢下借鉴…

测绘坐标数据封装处理

1、测绘数据 2、数据处理 public void dealData() {List<Map<String, Object>> shyqzdMapList 截图数据;Map<String, List<Map<String, Object>>> groupMap shyqzdMapList.stream().collect(Collectors.groupingBy(item -> String.valueOf…