react 安装使用 antd+国际化+定制化主题+样式兼容
安装antd
现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
yarn add antd
修改 src/App.js,引入 antd 的按钮组件。
import React from 'react';
import { Button } from 'antd';const App: React.FC = () => (<div className="App"><Button type="primary">Button</Button></div>
);export default App;
import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import {StyleProvider,legacyLogicalPropertiesTransformer,
} from "@ant-design/cssinjs"; //还可以进行rem配置px2remTransformer,具体查看antd文档
import { ConfigProvider } from 'antd';
import zhCN from "antd/locale/zh_CN";
// for date-picker i18n
import "dayjs/locale/zh-cn";
import App from "./App";
import "./index.css";const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement
);
root.render(//ConfigProvider 全局配置 locale国际化-中文 prefixCls设置统一样式前缀 theme设置主题(colorPrimary-- Primary btn 按钮颜色)<ConfigProviderlocale={zhCN}prefixCls="xx"theme={{//全局token: { colorPrimary: "#00b96b" },//组件components: {Button: { borderColorDisabled: "red" },},// 1. 单独使用暗色算法algorithm: theme.darkAlgorithm,// cssVar: true,}}>//样式兼容--如果你需要兼容旧版浏览器,请根据实际需求使用 StyleProvider 降级处理。// `hashPriority` 默认为 `low`,配置为 `high` 后,// 会移除 `:where` 选择器封装// `transformers` 提供预处理功能将样式进行转换//<StyleProviderhashPriority="high"transformers={[legacyLogicalPropertiesTransformer]}><React.StrictMode><App /></React.StrictMode></StyleProvider></ConfigProvider>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
定制主题:

全局变量(token):

局部-(组件token):

CSS变量
在 ConfigProvider 的 theme 属性中,通过 cssVar 配置来开启 CSS 变量模式。这个配置会被继承,所以希望全局开启 CSS 变量模式的话,只需要在根节点的 ConfigProvider 中配置即可。


相关文章:
react 安装使用 antd+国际化+定制化主题+样式兼容
安装antd 现在从 yarn 或 npm 或 pnpm 安装并引入 antd。 yarn add antd修改 src/App.js,引入 antd 的按钮组件。 import React from react; import { Button } from antd;const App: React.FC () > (<div className"App"><Button type&q…...
【Kubernetes】常见面试题汇总(十六)
目录 48.简述 Kubernetes PodsecurityPolicy 机制能实现哪些安全策略? 49.简述 Kubernetes 网络模型? 50.简述 Kubernetes CNl 模型? 48.简述 Kubernetes PodsecurityPolicy 机制能实现哪些安全策略? 在 PodSecurityPolicy 对象…...
【mysql】mysql之优化
本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…...
Django REST framework 实现缓存机制以优化性能
Django REST framework 实现缓存机制以优化性能 页面首页中,导航菜单或轮播广告在项目中每一个页面都会被用户频繁访问到,所以我们可以实现缓存,减少MySQL数据库的查询压力,使用内存缓存可以加快数据查询速度。 cache_page 装饰…...
快速了解高并发解决方案
对《高并发的哲学原理》的个人总结,原书地址如下 https://pphc.lvwenhan.com/ 本书的核心思想就是拆分,服务细化拆分多资源并行。 通用设计方法 例子:每秒100万次http请求 通过架构解决性能问题,在面对并发需求时ÿ…...
SpringBoot框架下的房产销售系统设计与实现
摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于房产销售系统当然也不能排除在外,随着网络技术的不断成熟,带动了房产销售系统,它彻底改变了过去传统的…...
基于RFID的门禁系统的设计(论文+源码)
1系统方案设计 通过需求分析,基于RFID的门禁系统总体设计框图。系统采用STM32单片机作为系统主控核心,利用独立按键与RFID识别模块能够实现门禁系统密码与IC卡开门功能。WiFi模块实现系统与手机APP的通信,用户可以通过手机APP进行门禁开关操…...
湖仓一体-Paimon篇-简介
什么是Paimon? 2021年末,Flink官方提出打造一个全新的存储 Flink Table Store,一个 Flink 完全内置的存储。 为了让 Flink Table Store 能够有更大的发展,Flink PMC经过讨论决定将其捐赠Apache进行独立孵化。 2023 年 3 月 12 日…...
React Native 0.76版本发布
关于 React Native 的 New Architecture 概念,最早应该是从 2018 年 RN 团队决定重写大量底层实现开始,因为那时候 React Native 面临各种结构问题和性能瓶颈,最终迫使 RN 团队开始进行重构。 而从 React Native 0.68 开始,New A…...
yolo自动化项目实例解析(一)日志格式输出、并发异步多线程、websocket、循环截图、yolo推理、3d寻路
本系列是为了学习自动化操作相关知识点,对开源项目原神ai的技术理解,开源地址如下,拉取版本号为1.78 https://gitee.com/LanRenZhiNeng/lanren-genshin-impact-ai 一、main入口主要函数说明 vi main.py 封装的函数较多,我们拆分…...
获取无人机经纬度是否在指定禁飞区内
1. 计算公式: (AB X AE ) * (CD X CE) >= 0 && (DA X DE ) * (BC X BE) >= 0 参考: 判断点是否在矩形框(多边形)内_qt opencv 判断一点是否在矩形内-CSDN博客 2.测试结果: 3.实现完整代码: #include<cstd...
解读:以RTC为基,AI为脑的“超拟人”AI实时互动解决方案
我们打造了一款满足想象与应用的智能体——AI实时互动。 谈谈AI智能体 当AI变得足够聪明时,用户与AI的交互将变得真实自然。于是,构建高拟真AI与用户的实时交互,已经成为企业提升数智化生产力的新思路。 在这个交互过程中,存在一…...
软件测试学习笔记丨Postman基础使用
本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/32096 一、Postman基础使用 1.1 简介 Postman是一款流行的API测试工具和开发环境,旨在简化API开发过程、测试和文档编制。优势: Postman可以快速构建请求,…...
HTML5+CSS3面试题:(第一天)
目录 1.HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5? 2.谈谈iframe标签的优缺点? iframe的优点: iframe的缺点: 3.CSS3有哪些新特性? 4.让chrome支持小于12px的…...
微信小程序中的模块化、组件化开发:完整指南
文章目录 前言一、模块化与组件化开发的优势1.1模块化开发的优势1.2 组件化开发的优势 二、组件的抽离标准及规范2.1 抽离组件的标准2.2 组件化开发规范 三、模块化规范的种类及优劣比较3.1 CommonJS3.2 ES6 Modules3.3 优劣对比 四、组件封装:全局组件、分包组件、…...
9.第二阶段x86游戏实战2-初识易语言
免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 本次游戏没法给 内容参考于:微尘网络安全 工具下载: 链接:https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…...
Cortex-A7:__disable_irq和GIC_DisableIRQ、__enable_irq和GIC_EnableIRQ的区别(1)API介绍
0 相关资料 ARM Generic Interrupt Controller Architecture version 2.0.pdf 1 API介绍 1.1 __disable_irq __disable_irq函数的作用是失能IRQ,也就是不响应中断。实现代码如下: /**\brief Disable IRQ Interrupts\details Disables IRQ interrupt…...
MATLAB在嵌入式系统设计中的最佳实践
嵌入式系统设计是一个复杂的过程,涉及硬件和软件的紧密集成。MATLAB提供了一套全面的解决方案,从算法开发到代码生成,再到硬件验证,极大地简化了这一过程。本文将探讨使用MATLAB进行嵌入式系统设计的最佳实践,包括模型…...
wpf 使用Oxyplot 库制作图表示例
方法: InitTable 方法:负责初始化图表模型,包括设置图表的样式、坐标轴、系列和注释。这个方法包括多个 Init 方法的调用,表示图表的初始化过程可以分步骤进行。 InitGoalPoint 方法:当前未实现,但预留了子…...
CSS3中的@media查询
CSS3的media查询是一种强大的功能,允许我们根据不同的媒体类型和设备特性来应用不同的样式规则。这使得我们能够创建响应式设计,确保网站或应用在各种设备和屏幕尺寸上都能提供良好的用户体验。本文将详细探讨media查询的定义、语法、使用场景及常见问题…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
短视频矩阵系统文案创作功能开发实践,定制化开发
在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目,该项目是一个 Spring AI 快速入门的样例工程项目,旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计,每个模块都专注于特定的功能领域,便于学习和…...
Vue 模板语句的数据来源
🧩 Vue 模板语句的数据来源:全方位解析 Vue 模板(<template> 部分)中的表达式、指令绑定(如 v-bind, v-on)和插值({{ }})都在一个特定的作用域内求值。这个作用域由当前 组件…...
