当前位置： 首页 > news >正文

【Next】全局样式和局部样式

news 2026/1/30 17:20:03

不同于 nuxt ，next 的样式绝大部分都需要手动导入。

全局样式

使用 sass 先安装 npm i sass -D 。

我们可以定义一个 styles 文件，存放全局样式。

在这里插入图片描述

variables.scss

$fs30: 30px;@mixin border() {border: 1px solid red;
}

main.scss

@use './variables' as *;$fsColor: lightgreen;
.global-style {color: $fsColor;@include border();
}

globals.css

.global-border {border: 1px solid black;
}

import MyButton from "@/components/my-button";
import Head from "next/head";
import '../styles/globals.css'
import '@/styles/main.scss'export default function Home() {return (<><Head><title>我是title</title><meta name="description" content="Generated by create next app"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" href="/favicon.ico"/></Head><div className="global-style">Welcome to my website! 你好</div><MyButton/></>);
}

局部样式

可以定义一个该文件夹下的 xxx.module.css 文件：

.about-color {color: hotpink;
}

import React from 'react';
import Link from "next/link";
import styles from './page.module.css'function Page(props) {return (<><div className={styles['about-color']}>我是about页</div><Link href="/"> go to home</Link></>);
}export default Page;

同时 支持从CSS module 文件导出（export）的 Sass 变量。

app/variables.module.scss

$primary-color: #64ff00;:export {primaryColor: $primary-color;
}

app/page.jsx

import variables from './variables.module.scss'export default function Page() {return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

所以从上面我们可以看出，当添加了 module 后缀的 css 将被模块化，可以直接以 一个变量 styles 的形式导入使用，否则只能使用常规的 导入 css 文件的导入样式。

相关文章：

【Next】全局样式和局部样式

不同于 nuxt &#xff0c;next 的样式绝大部分都需要手动导入。 全局样式 使用 sass 先安装 npm i sass -D 。 我们可以定义一个 styles 文件&#xff0c;存放全局样式。 variables.scss $fs30: 30px;mixin border() {border: 1px solid red; }main.scss use ./variables …...

编程日记 2024/8/14 12:07:13

关于Docker的详细介绍

Docker是一个开源的应用容器引擎&#xff0c;它允许开发者将应用程序及其依赖项打包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux或Windows操作系统的机器上&#xff0c;实现虚拟化。以下是关于Docker的详细介绍&#xff1a; ### 一、Docker的定义 Docker是一…...

编程日记 2024/8/14 12:06:12

一台佳能G3811彩色喷墨打印机打印没颜色报5200的维修记录

一台佳能G3811彩色喷墨打印机，用户送修，称打印没有颜色，加电开机连电脑安驱动打印测试，确实没有颜色，于是清洗喷头结果打印机那个显示屏上 ，上来就报错P08,电脑提示5200； 话不多说，开始维修，仅记录当时的维修方法及步骤，其它未列出。。。 维修方法： 1、进维…...

编程日记 2024/8/14 12:05:11

【LeetCode】452.用最少数量的箭引发气球

能够找到问题的解法与把问题足够简化是天壤之别。比如我知道这题可以用贪心算法来解决&#xff0c;但是代码实现的过程中就走上了复杂的路&#xff0c;但是官方题解给的代码则相当简洁。这说明我思考的不够深入&#xff0c;导致化繁为简的能力不够强。 1. 题目 2. 分析 一道贪…...

编程日记 2024/8/14 12:03:08

网络安全流程规范文件解读（安全专业L1级）

技术能力项编号AQ-AQ-L1-02.01(安全维护作业计划执行能力) 课程目标&#xff1a; 通过学习课程&#xff0c;学员可以&#xff1a; 1.了解ZGYD网络安全流程规范 2.独立执行安全维护作业计划。 流程规范 一、《ZGYD远程接入安全管理办法》 二、《ZGYD网络运维账号口令管理办…...

编程日记 2024/8/14 12:01:06

Java、python、php版的邮件发送与过滤系统的设计与实现 （源码、调试、LW、开题、PPT）

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…...

编程日记 2024/8/14 12:00:03

st算法求RMP

st算法&#xff08;sparse_tabel&#xff09;可以在O(N log N)的预处理后实现O(1)的查询效率。 rmq&#xff1a;Range Maximum (Minimum) Query的缩写&#xff0c;顾名思义是用来求某个区间内的最大值或最小值&#xff0c;通常用在需要多次询问一些区间的最值得问题中。 #inc…...

编程日记 2024/8/14 11:59:01

零基础学习Redis(1) -- Redis简介

Redis是一个在内存中存储数据的一个中间组件&#xff0c;可用作数据库或数据缓存&#xff0c;通常在分布式系统中使用 &#xff08;不了解分布式&#xff1f; 点击传送&#xff09; 1. Redis特性 在内存中存储数据&#xff0c;通过键值对的方法存储key为string&#xff0c;v…...

编程日记 2024/8/14 11:58:00

安装MySQL数据库【后端 8】

安装MySQL数据库 MySQL是世界上最流行的开源关系型数据库管理系统&#xff08;RDBMS&#xff09;之一&#xff0c;广泛应用于Web应用程序开发中。无论你是初学者还是有一定经验的开发者&#xff0c;掌握MySQL的安装都是必不可少的技能。本文将指导你如何在不同的操作系统上安装…...

编程日记 2024/8/14 11:56:58

JAVA学习-练习试用Java实现“整数转换英文表示”

问题&#xff1a; 将非负整数 num 转换为其对应的英文表示。示例 1&#xff1a; 输入&#xff1a;num 123 输出&#xff1a;"One Hundred Twenty Three" 示例 2&#xff1a; 输入&#xff1a;num 12345 输出&#xff1a;"Twelve Thousand Three Hundred Fo…...

编程日记 2024/8/14 11:55:57

TPshop商城的保姆教程（Ubuntu）

1.上传TPSHOP源码 选择适合自己的版本下载 TPshop商城源文件下载链接&#xff1a; 百度网盘 请输入提取码 上传tpshop的源码包到特定目录/var/www/html 切换到/var/www/html 目录下 cd /var/www/html修改HTML目录下所有文件权限 chmod -R 777 * 2.打开网址配置 TPshop安…...

编程日记 2024/8/14 11:50:49

MySQL存储过程、触发器、视图

数据库中的存储过程、触发器和视图是三种常用的数据库对象&#xff0c;它们在管理数据、优化性能和简化复杂操作中起着重要的作用。下面是每种对象的详细介绍和示例&#xff1a; 存储过程 存储过程是一组为了执行特定功能而预编译的SQL语句。它类似于编程中的函数&#xff0c…...

编程日记 2024/8/14 11:49:47

每一行txt文件的内容将作为CSV文件中的一行，逗号、空格和句号，冒号作为分隔符拆分成多列

将指定文件夹中的每个txt文件的内容读取出来&#xff0c;并将每个文件的内容按逗号、空格和句号作为分隔符拆分成多列&#xff0c;每一行txt文件的内容将作为CSV文件中的一行&#xff0c;此文件夹中的文件会有非utf-8字符&#xff0c;是如下的代码&#xff0c;如果是utf-8编码的…...

编程日记 2024/8/14 11:48:45

基于inotif的文件同步备份

1 ftp 因为服务器是linux的&#xff0c;而备份服务器是windows server的&#xff0c;故而采取lftp进行同步文件。 1.1 全量同步 cat > /appdata/script/sync_all.sh <<EOF #!/bin/bash # FTP 服务器信息 FTP_SERVER"ftp://192.168.0.5" FTP_USER"…...

编程日记 2024/8/14 11:45:42

luckyexcel 编辑预览excel文件

luckyexcel 编辑预览excel文件 支持后端传文件流预览编辑&#xff0c;也支持选择本地文件编辑预览 看效果 上代码 <template><div style"margin: 30px"><div class"button-box2"><div><div style"color: red">…...

编程日记 2024/8/14 11:41:37

记录Java使用websocket

实现场景&#xff1a;每在小程序中添加一条数据时&#xff0c;后台将主动推送一个标记给PC端&#xff0c;PC端接收到标记将进行自动播放音频。 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import or…...

编程日记 2024/8/14 11:40:36

（javaweb）分层解耦

目录 一.三层架构 二.分层解耦 三.IOC&DI入门 四.IOC详解 五. DI详解 一.三层架构 复用性差&#xff0c;难以维护和管理 前端发起请求&#xff0c;先会到达controller&#xff0c;再调用service进行逻辑处理&#xff0c;逻辑处理的前提是先拿到数据&#xff0c;到dao…...

编程日记 2024/8/14 11:38:34

2024华为数通HCIP-datacom最新题库（H12-831变题更新⑨）

请注意&#xff0c;华为HCIP-Datacom考试831已变题 请注意&#xff0c;华为HCIP-Datacom考试831已变题 请注意&#xff0c;华为HCIP-Datacom考试831已变题 近期打算考HCIP的朋友注意了&#xff0c;如果你准备去考试&#xff0c;还是用的之前的题库&#xff0c;切记暂缓。 如…...

编程日记 2024/8/14 11:37:33

PCIe学习笔记（21）

读请求的数据返回&#xff08;Data Return for Read Requests&#xff09; •针对内存读取请求的单个完成可能提供少于请求的全部数据量&#xff0c;只要对于给定请求的所有完成在组合起来时返回了读取请求中请求的数据量。 ◦不同请求的完成不能合并。 ◦I/O和Configuratio…...

编程日记 2024/8/14 11:36:31

分享Embedding 模型微调的实现

写在前面 \1. 当前比较主流的Embedding开源模型有哪些&#xff1f; 答&#xff1a;1. m3e(Moka Massive Mixed Embedding) 2. BAAI/bge-large-zh-v1.5。更多的开源模型评测榜单可见&#xff1a; https://huggingface.co/spaces/mteb/leaderboard \2. 模型的作用&#xff1f; …...

编程日记 2024/8/14 11:32:27

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/1/15 5:00:25

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/1/15 7:07:44

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/1/26 20:14:23

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/1/24 13:01:05

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2026/1/24 10:06:29

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/29 17:50:06