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

最新推荐文章于 2025-01-22 09:40:10 发布
原创 最新推荐文章于 2025-01-22 09:40:10 发布 · 253 阅读 · 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-mobile-plus:基于antd-mobile @ 2的业务组件
03-25
antd-mobile-plus 这是一个使用antd-mobile @ 3中的规范，从新规划的基础antd-mobile @ 2组件的基础上开发的业务组件。 其中包含了一些约定和规范，任何参加此项目维护的朋友，都必须保持一下约定，如果你也需要基于...
修改antd主题样式
Zwq8023520的博客
08-07 784
antd更改主题样式
antd按需引入及修改主题
dbn2001的博客
05-11 316
根目录下创建文件 config-overrides.js 在修改配色时需要下载less和less—loader包，并且必须加上addLessLoader和adjustStyleLoaders // 项目根目录下，新增文件 config-overrides.js const { override, fixBabelImports, addLessLoader, adjustStyleLoaders } = require('customize-cra'); module.exports...
动态更改Ant Design主题的解决方案
最新发布
gitblog_00874的博客
01-22 501
动态更改Ant Design主题的解决方案 1. 项目基础介绍和主要编程语言 该项目是一个开源的插件，名为dynamic-antd-theme，主要功能是动态更改Ant Design的主题，无论是使用less还是css。它最初是为React项目中的Ant Design设计的，但核心样式也适用于Ant Design Vue和Ant Design Angular。项目的主要编程语言是JavaScrip...
Webpack Antd 主题配置
朱建伟的专栏
05-05 4856
1)theme 属性 配置在 package.json 或 .webpackrc 下的 theme 字段。theme 可以配置为一个对象或文件路径。 “theme”: { “primary-color”: “#1DA57A”, }, 2) .babelrc设置支持less 样式必须加载 less 格式。 如果你在使用 babel-plugin-import 的 style 配置来...
精选资源
react-antd-admin:一个简洁的antd-react-admin应用-React + Antd后台管理系统
03-11
React-Antd-Admin 简介 React-Antd-Admin，一个JavaScript应用，项目由业界最优秀的React应用开发工具create-react-app初始化创建，并与Antd开箱即用的React组件搭配，非常适合后台产品。 React-Antd-Admin同时也是...
next-plugin-antd-less:将Antd（较少）与Next.js结合使用，对其他Next-Plugs零依赖
04-27
从1.0开始修改Antd变量后，支持Hot Update样式。 演示版 :pushpin: :pushpin: 是的！ 自v1.0起，此插件同时支持Next.js和 。 兼容性 接下来的v9.3 〜 v10.1+ （现在才webpack4， ） 少v3.0 〜 v4.0+ 安装 ...
精选资源
vite-plugin-antd-theme:vite下的antd-design-vue主题变量生成插件
08-04
vite 下的 antd-design-vue 主题生成插件，依赖 antd-theme-generator demo vite.config.ts // ... import viteAntdTheme, { ThemeEntry, AntdThemeOptions } from 'vite-plugin-antd-theme'; // 从1.1.0之后，不...
精选资源
antd-theme-webpack-plugin:一个Webpack插件，用于为Ant Design生成动态主题
05-02
antd-主题-webpack-plugin 该webpack插件用于生成特定于颜色的less / css并将其注入到index.html文件中，以便您可以在浏览器中更改Ant Design特定的颜色主题。 现场主题演示： 为了与您的webpack配置集成，请安装...
ant-design主题色切换
qq_17848637的博客
05-23 1769
最近写了个网站需要用到主题切换，虽然是个b端项目，虽说可有可无这个主题切换但是还是写了，正如我的网站昵称，半吊子前端攻城狮我之前是没有写过这个的,所以经常一番查阅资料最终得到了以下教程!步骤一.因为需要全局任何地方都可以切换主题,我这里用了redux-tookit,其实可以不用,我就是为了回顾一下子,接下来去index.js里面挂载,这里大家看看代码,这里我们在需要的地方写一个改变状态的事件。教程结束了,修改具体的组件颜色切换可以看看上面的文档!然后创建一个store文件。
【React】Ant Design自定义主题风格及主题切换
无限循环
04-16 3595
认识了解Ant Design的自定义主题基本知识，实战手搓自定义主题切换具体实现过程
react + antd实现动态切换主题功能（适用于antd5.x版本）
草率小猿的博客
06-12 6827
本文介绍了antd 5.x版本下如何实现默认主题与暗黑主题切换。
React + Antd实现动态切换主题功能之二（默认主题与暗黑色主题切换）
热门推荐
草率小猿的博客
12-22 1万+
在前一篇文章中初步的讲解了通过ConfigProvider全局化配置prefixCls的方式来动态切换部分主题样式配置，文章中只是通过修改部分颜色（如primary颜色）来初步展示了效果，可能效果不甚理想。 对于实际项目开发中，其中有一类需求比较多的就是动态切换默认（亮色）主题与暗黑色主题，在ant-design官网有一个官方的demo可以参考。
Umi4+Antd 5 切换主题组件
shanshiping的专栏
03-15 1391
两种方式都可以，选其中一个就行。
ant-design-vue 4.x实现自由切换主题色和暗色亮色模式
优快云_4iak的博客
08-05 1万+
主题样式和亮暗色模式一直是前端开发不可避免的问题，今天我带来一种新的思路实现动态主题和亮暗色模式，在演示项目中使用到了最新的ant design vue 4.x，但是其他的ui库也可以使用类似的方式去实现动态主题。同时项目使用到了pinia进行状态管理，配合持久化插件可以保持网页的主题颜色不变。
React + antd 主题更换
Mia的博客
05-13 1071
配置 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 5155
按照配置主题的要求，自定义主题需要用到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 1747
本文详细介绍了基于React和Ant Design的主题切换系统实现方案。系统采用分层架构设计，包含配置层、服务层、组件层和工具层，支持亮色/暗色主题动态切换、自定义主色调、系统主题自动适配等功能。关键技术包括：CSS-in-JS样式方案、全局状态管理、类型安全定义、设计令牌生成算法等。文章还提供了完整的项目结构设计、核心代码实现、性能优化策略（样式缓存、防抖处理、过渡动画）以及测试方案。系统具有高可维护性和扩展性，支持后续扩展多品牌主题、组件级主题等高级功能，是构建现代化Web应用主题系统的完整解决方案。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值