2023-03-24 如何修改antd主题

最新推荐文章于 2026-06-12 10:02:40 发布
原创 最新推荐文章于 2026-06-12 10:02:40 发布 · 284 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端 #react.js
博客围绕前端技术展开，重点涉及React相关内容，但具体细节未给出。

在这里插入图片描述

Janfiveee_
关注
next-antd-dark-mode:用于更改蚂蚁设计主题（深色，浅色）模式的插件
05-22
下一个黑暗模式 更改蚂蚁设计主题旁边的插件（ :milky_way: 黑暗的 :sunset: 光） :high_voltage: 块文件antd组件 :nail_polish: 自订变数 :milky_way: 黑暗的 :sunset: 光 用法 npm i next-antd-dark-mode --save or yarn add next-antd-dark-mode 演示 环境 :nail_polish: 文件-> antd-component.less //https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less @import '~antd/lib/style/core/index.less'; //@import "~antd/lib/affix/style/index.less"; //@import '~antd/lib/alert/style/index.less'; //
修改antd主题样式
Zwq8023520的博客
08-07 841
antd更改主题样式
【React】Ant Design自定义主题风格及主题切换
无限循环
04-16 3858
认识了解Ant Design的自定义主题基本知识，实战手搓自定义主题切换具体实现过程
动态更改Ant Design主题的解决方案
gitblog_00874的博客
01-22 544
动态更改Ant Design主题的解决方案 1. 项目基础介绍和主要编程语言 该项目是一个开源的插件，名为dynamic-antd-theme，主要功能是动态更改Ant Design的主题，无论是使用less还是css。它最初是为React项目中的Ant Design设计的，但核心样式也适用于Ant Design Vue和Ant Design Angular。项目的主要编程语言是JavaScrip...
ant-design主题色切换
qq_17848637的博客
05-23 1861
最近写了个网站需要用到主题切换，虽然是个b端项目，虽说可有可无这个主题切换但是还是写了，正如我的网站昵称，半吊子前端攻城狮我之前是没有写过这个的,所以经常一番查阅资料最终得到了以下教程!步骤一.因为需要全局任何地方都可以切换主题,我这里用了redux-tookit,其实可以不用,我就是为了回顾一下子,接下来去index.js里面挂载,这里大家看看代码,这里我们在需要的地方写一个改变状态的事件。教程结束了,修改具体的组件颜色切换可以看看上面的文档!然后创建一个store文件。
react + antd实现动态切换主题功能（适用于antd5.x版本）
草率小猿的博客
06-12 7039
本文介绍了antd 5.x版本下如何实现默认主题与暗黑主题切换。
【实战】 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上) —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（六）
程序边界
06-30 2287
render(
前端react实际开发过程中 超实用的问题点 汇总
sincejuly1995的博客
12-03 1285
react开发bug笔记
MuleSoft+LLM企业级AI编排：安全可控的生产实践
最新发布
anzheng6118的博客
06-12 660
大语言模型（LLM）在企业系统中并非独立智能体，而是需嵌入现有IT治理框架的增强型能力组件。其核心挑战在于解决模型不确定性与企业对事务一致性、审计可追溯、合规可验证的刚性要求之间的矛盾。MuleSoft等企业级集成平台凭借成熟的连接器治理、策略执行点（PEP）、分布式事务编排和全链路审计能力，为LLM提供运行边界与可信底座。本文聚焦AI编排（AI Orchestration）这一关键范式，详解如何通过RAG增强、Output Schema约束、分层架构设计及端到端审计日志体系，在Salesforce、Ora
Umi4+Antd 5 切换主题组件
shanshiping的专栏
03-15 1483
两种方式都可以，选其中一个就行。
React + Antd实现动态切换主题功能之二（默认主题与暗黑色主题切换）
草率小猿的博客
12-22 1万+
在前一篇文章中初步的讲解了通过ConfigProvider全局化配置prefixCls的方式来动态切换部分主题样式配置，文章中只是通过修改部分颜色（如primary颜色）来初步展示了效果，可能效果不甚理想。 对于实际项目开发中，其中有一类需求比较多的就是动态切换默认（亮色）主题与暗黑色主题，在ant-design官网有一个官方的demo可以参考。
ant-design-vue 4.x实现自由切换主题色和暗色亮色模式
CSDN_4iak的博客
08-05 1万+
主题样式和亮暗色模式一直是前端开发不可避免的问题，今天我带来一种新的思路实现动态主题和亮暗色模式，在演示项目中使用到了最新的ant design vue 4.x，但是其他的ui库也可以使用类似的方式去实现动态主题。同时项目使用到了pinia进行状态管理，配合持久化插件可以保持网页的主题颜色不变。
React + antd 主题更换
Mia的博客
05-13 1119
配置 less的配置，用的是antd4版本less版本为10 所以配置webpack.config.js： { test: /\.(css|less)$/, use: [ { loader: "style-loader"}, { loader: "css-loader"}, { loader: "less-loader", options: { lessOptions: {
React UI组件库——如何快速实现antd的按需引入和自定义主题
xuxuii的博客
07-18 5231
按照配置主题的要求，自定义主题需要用到less变量覆盖功能。我们可以引入customize-cra中提供的less相关的函数addLessLoader来帮助加载less样式，同时修改config-overrides.js文件。安装less和less-loader想要修改less文件需要安装less。修改完之后编译less文件需要安装less-loader。修改文件//配置具体的修改规则const{{这里利用了less-loader的modifyVars配置主题。......
前端主题切换方案(React+Antd) 万字详解
油墨香^-^的博客
08-10 1869
本文详细介绍了基于React和Ant Design的主题切换系统实现方案。系统采用分层架构设计，包含配置层、服务层、组件层和工具层，支持亮色/暗色主题动态切换、自定义主色调、系统主题自动适配等功能。关键技术包括：CSS-in-JS样式方案、全局状态管理、类型安全定义、设计令牌生成算法等。文章还提供了完整的项目结构设计、核心代码实现、性能优化策略（样式缓存、防抖处理、过渡动画）以及测试方案。系统具有高可维护性和扩展性，支持后续扩展多品牌主题、组件级主题等高级功能，是构建现代化Web应用主题系统的完整解决方案。
react+antd 修改主题色
weixin_48327767的博客
12-09 4284
项目使用的时 react 框架 和 ant design ui组件库 antd 官网中对定制主体是这样说的 详见：https://ant.design/docs/react/customize-theme-cn 官网说的是 antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量 然而我的项目中使用的是 sass 语言 所以要想修改antd 主体颜色，首先需要 1、安装 less 依赖包 npm install less-loader npm install less 2、修改
antd-修改子菜单区域外背景颜色（修改antd组件样式）
热门推荐
陛下Ya的博客
06-04 1万+
目的：修改antd子菜单背景颜色 方法：在子菜单按钮外区域右键检查 查看样式，此处为例修改.ant-menu-dark .ant-menu-inline.ant-menu-sub处可调整子菜单背景颜色 在less文件中正式修改颜色
create-react-app中使用less和antd并修改主题颜色
luck_lin
10-21 1万+
引入less 如果项目根目录中没有config文件夹，首先暴露出项目配置文件，项目下执行： npm run eject 如果项目是从git仓库中pull下来的的话，必须确保本地项目与仓库中没有冲突，才能够eject成功，否则命令会报错，因为该操作是不可逆的，一旦暴露出配置文件后eject功能将被删除。 eject成功后项目下会多出两个文件夹，config和scripts，我们开发中一般只...
Antd 修改主题颜色2018 最新版 填坑记录
weixin_30807677的博客
12-18 1654
首先，让我想说的是，现在有很多的更新，网上的一些也有的没用了， 接下来让我来分享一些我的解决方法，时间：2018.12/18. 1.和网上的一样，我用的是creat-react-app创建的项目，修改主题的方式也是用的：run eject后的项目结构的webpack.config.dev.js修改 第一步： yarn run eject 　或者 npm run eject　...
新版React脚手架更改antd主题
vuvivian的博客
01-21 1977
http://www.cnblogs.com/wuqun/p/10131483.html 新版脚手架修改主题主要有两点   (*･ω-q) 1、webpack.config.dev.js和 ....prod.js中 style必须为true，而不是css plugins: [ [ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值