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

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&#xff0c;引入 antd 的按钮组件。 import React from react; import { Button } from antd;const App: React.FC () > (<div className"App"><Button type&q…...

【Kubernetes】常见面试题汇总(十六)

目录 48.简述 Kubernetes PodsecurityPolicy 机制能实现哪些安全策略&#xff1f; 49.简述 Kubernetes 网络模型&#xff1f; 50.简述 Kubernetes CNl 模型&#xff1f; 48.简述 Kubernetes PodsecurityPolicy 机制能实现哪些安全策略&#xff1f; 在 PodSecurityPolicy 对象…...

【mysql】mysql之优化

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…...

Django REST framework 实现缓存机制以优化性能

Django REST framework 实现缓存机制以优化性能 页面首页中&#xff0c;导航菜单或轮播广告在项目中每一个页面都会被用户频繁访问到&#xff0c;所以我们可以实现缓存&#xff0c;减少MySQL数据库的查询压力&#xff0c;使用内存缓存可以加快数据查询速度。 cache_page 装饰…...

快速了解高并发解决方案

对《高并发的哲学原理》的个人总结&#xff0c;原书地址如下 https://pphc.lvwenhan.com/ 本书的核心思想就是拆分&#xff0c;服务细化拆分多资源并行。 通用设计方法 例子&#xff1a;每秒100万次http请求 通过架构解决性能问题&#xff0c;在面对并发需求时&#xff…...

SpringBoot框架下的房产销售系统设计与实现

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于房产销售系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了房产销售系统&#xff0c;它彻底改变了过去传统的…...

基于RFID的门禁系统的设计(论文+源码)

1系统方案设计 通过需求分析&#xff0c;基于RFID的门禁系统总体设计框图。系统采用STM32单片机作为系统主控核心&#xff0c;利用独立按键与RFID识别模块能够实现门禁系统密码与IC卡开门功能。WiFi模块实现系统与手机APP的通信&#xff0c;用户可以通过手机APP进行门禁开关操…...

湖仓一体-Paimon篇-简介

什么是Paimon&#xff1f; 2021年末&#xff0c;Flink官方提出打造一个全新的存储 Flink Table Store&#xff0c;一个 Flink 完全内置的存储。 为了让 Flink Table Store 能够有更大的发展&#xff0c;Flink PMC经过讨论决定将其捐赠Apache进行独立孵化。 2023 年 3 月 12 日…...

React Native 0.76版本发布

关于 React Native 的 New Architecture 概念&#xff0c;最早应该是从 2018 年 RN 团队决定重写大量底层实现开始&#xff0c;因为那时候 React Native 面临各种结构问题和性能瓶颈&#xff0c;最终迫使 RN 团队开始进行重构。 而从 React Native 0.68 开始&#xff0c;New A…...

yolo自动化项目实例解析(一)日志格式输出、并发异步多线程、websocket、循环截图、yolo推理、3d寻路

本系列是为了学习自动化操作相关知识点&#xff0c;对开源项目原神ai的技术理解&#xff0c;开源地址如下&#xff0c;拉取版本号为1.78 https://gitee.com/LanRenZhiNeng/lanren-genshin-impact-ai 一、main入口主要函数说明 vi main.py 封装的函数较多&#xff0c;我们拆分…...

获取无人机经纬度是否在指定禁飞区内

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变得足够聪明时&#xff0c;用户与AI的交互将变得真实自然。于是&#xff0c;构建高拟真AI与用户的实时交互&#xff0c;已经成为企业提升数智化生产力的新思路。 在这个交互过程中&#xff0c;存在一…...

软件测试学习笔记丨Postman基础使用

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/32096 一、Postman基础使用 1.1 简介 Postman是一款流行的API测试工具和开发环境&#xff0c;旨在简化API开发过程、测试和文档编制。优势&#xff1a; Postman可以快速构建请求&#xff0c…...

HTML5+CSS3面试题:(第一天)

目录 1.HTML5有哪些新特性,移除了那些元素&#xff1f;如何处理HTML5新标签的浏览器兼容问题&#xff1f;如何区分HTML和HTML5&#xff1f; 2.谈谈iframe标签的优缺点? iframe的优点&#xff1a; iframe的缺点&#xff1a; 3.CSS3有哪些新特性? 4.让chrome支持小于12px的…...

微信小程序中的模块化、组件化开发:完整指南

文章目录 前言一、模块化与组件化开发的优势1.1模块化开发的优势1.2 组件化开发的优势 二、组件的抽离标准及规范2.1 抽离组件的标准2.2 组件化开发规范 三、模块化规范的种类及优劣比较3.1 CommonJS3.2 ES6 Modules3.3 优劣对比 四、组件封装&#xff1a;全局组件、分包组件、…...

9.第二阶段x86游戏实战2-初识易语言

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;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&#xff0c;也就是不响应中断。实现代码如下&#xff1a; /**\brief Disable IRQ Interrupts\details Disables IRQ interrupt…...

MATLAB在嵌入式系统设计中的最佳实践

嵌入式系统设计是一个复杂的过程&#xff0c;涉及硬件和软件的紧密集成。MATLAB提供了一套全面的解决方案&#xff0c;从算法开发到代码生成&#xff0c;再到硬件验证&#xff0c;极大地简化了这一过程。本文将探讨使用MATLAB进行嵌入式系统设计的最佳实践&#xff0c;包括模型…...

wpf 使用Oxyplot 库制作图表示例

方法&#xff1a; InitTable 方法&#xff1a;负责初始化图表模型&#xff0c;包括设置图表的样式、坐标轴、系列和注释。这个方法包括多个 Init 方法的调用&#xff0c;表示图表的初始化过程可以分步骤进行。 InitGoalPoint 方法&#xff1a;当前未实现&#xff0c;但预留了子…...

CSS3中的@media查询

CSS3的media查询是一种强大的功能&#xff0c;允许我们根据不同的媒体类型和设备特性来应用不同的样式规则。这使得我们能够创建响应式设计&#xff0c;确保网站或应用在各种设备和屏幕尺寸上都能提供良好的用户体验。本文将详细探讨media查询的定义、语法、使用场景及常见问题…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

​​企业大模型服务合规指南:深度解析备案与登记制度​​

伴随AI技术的爆炸式发展&#xff0c;尤其是大模型&#xff08;LLM&#xff09;在各行各业的深度应用和整合&#xff0c;企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者&#xff0c;还是积极拥抱AI转型的传统企业&#xff0c;在面向公众…...