解决qiankun项目与子应用样式混乱问题

背景

qiankun项目用的是Vue2+Antdesign2,但其中一个子应用用的是Vue3+Antdesign4。集成之后发现子应用的样式混乱,渲染的是Antdesign2的样式。

解决

以下步骤在子应用里操作

1. 在main.js引入ConfigProvider ,在app全局注册ConfigProvider

import { ConfigProvider } from 'ant-design-vue';// Ant Design Vue 的 Message 组件(以及 Notification、Modal、Drawer 等)的行为与其他组件略有不同,因为它们是通过 JavaScript 动态生成并附加到 DOM 中的,而不是通过组件树直接渲染。这意味着,这些组件不会自动继承 ConfigProvider 的配置,包括自定义的样式前缀。
// 确保 message 等组件也能应用自定义的样式前缀
ConfigProvider.config({prefixCls: 'projectKeyXXX',getPopupContainer: () => document.body,
});let app = createApp(App)
app.component(ConfigProvider.name, ConfigProvider);

 2. App.vue里用ConfigProvider包住,定义前缀(前缀需与在main.js定义的前缀保持一致)

<template><a-config-provider prefixCls="projectKeyXXX"><router-view /></a-config-provider>
</template>

3. 在自己项目重新Antdesign样式的名字全部都要把"ant-"改成"projectKeyXXX",例如:

.projectKeyXXX-table-striped {background-color: #fafafa;
}

因为Antdesign的样式名字已经全部改成projectKeyXXX了,所以要注意在子应用里所有关于Antdesign的样式前缀都需要改。

相关文档参考

全局化配置 ConfigProvider - Ant Design Vue (antdv.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/35895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【异常错误】归一化导致的图像生成颜色偏差

由于归一化的问题&#xff0c;会导致生成的图像颜色偏差严重&#xff0c;例如会导致生成的颜色偏红黑色、淡色、青色.. 如果你生成的图像整体感官上没有问题&#xff0c;但是却在颜色上有很大偏差&#xff0c;那么很大可能就是你训练的时候归一化的程序不对 ImageFolder的实现…

Depth Anything V1,V2论文解读

Depth Anything 引言Depth Anything V1标注方法学习标注图像发挥未标注图像的潜力语义辅助感知 Depth Anything V2总体框架流程 引言 在深度估计领域&#xff0c;单目深度估计&#xff08;Monocular Depth Estimation&#xff0c;MDE&#xff09;是指利用单个摄像头拍摄的图像…

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(十八)

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 28 节&#xff09; P28《27.网络连接-Http请求数据》 案例&#xff1a; 这里不懂后端假设服务器的前端小伙伴就需要课程源码资料了…

深度之眼(二十五)——研究生学习计划安排

文章目录 一、前言二、结构安排和规划2.1 夯实基础2.2 分方向训练&#xff08;待&#xff09;2.3 进阶训练 三、其他 一、前言 课题组这边是需要对机器视觉有所要求吧&#xff0c;也就是CV方向。这一届研三师兄也都是在大厂拿到30W的年薪了&#xff0c;也是需要拥抱深度学习这…

java收徒 java辅导 java试用期辅导 java零基础学习

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末报名辅导&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还有大家…

守护变电箱消防安全,全氟己酮自动灭火片该安装在哪个位置?

变电箱、配电柜、换电柜是电力设备的重要组成部分&#xff0c;安全性至关重要。但在使用过程中&#xff0c;容易受到电气、机械、环境等因素影响&#xff0c;出现接触不良、短路、漏电等安全隐患&#xff0c;从而引发火灾事故。为了及时防范火灾风险&#xff0c;提前安装一款能…

【LeetCode】每日一题:数组中的第K大的元素

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 解题思路 第一种是快排&#xff0c;快…

Vue中数组的【响应式】操作

在 Vue.js 中&#xff0c;当你修改数组时&#xff0c;Vue 不能检测到以下变动的数组&#xff1a; 当你利用索引直接设置一个项时&#xff0c;例如&#xff1a;vm.items[indexOfItem] newValue当你修改数组的长度时&#xff0c;例如&#xff1a;vm.items.length newLength 为…

网卡基础命令

使用 nmcli 可以执行各种网络管理任务&#xff0c;包括重新加载连接配置、重启网卡以及关闭和启用网卡。以下是一些常见的基础命令及其用途&#xff1a; 重新加载连接配置 sudo nmcli connection reload 重新加载所有网络连接的配置文件。 重启网卡&#xff08;网络设备&#x…

Java基础(二)——数组,方法,方法重载

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…

01_02_Mybatis的配置文件与基于XML的使用

1、引入日志 在这里我们引入SLF4J的日志门面&#xff0c;使用logback的具体日志实现&#xff1b;引入相关依赖&#xff1a; <!--日志的依赖--><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version&g…

从命令行管理文件——软连接,软硬连接的区别

软连接 1. 原理 软连接本质是一种符号连接&#xff0c;类似于 Windows 的快捷方式&#xff0c;存储对应文件的路劲 2. 格式 ln -s 源文件 软连接名称 例&#xff1a; [rootserver /] # cd ~ [rootserver ~] # echo "china" > h1.txt [rootserver ~] # ln…

2024国内外音频转换器大盘点,盘点音乐剪辑的7个有效方法!

当遇到不支持的音乐文件时&#xff0c;您可能就会想要拥有一款优秀的音频转换器。当您想减小大量音乐文件以节省设备存储空间时&#xff0c;它也可以很好地帮上忙。如果您正在寻找这么一款音频转换器&#xff0c;那么&#xff0c;请不要错过这篇文章。一款顶尖的音频转换器不仅…

Oracle day10

create table category( 类目id number, 父类目id number, 描述 char(500) ) --insert into category(类目id,父类目id) values(1001,1); /*insert into category values(1,0,0为根类目); insert into category(类目id,父类目id) values(1002,2); …

USB2.0学习1--基本概念

目录 1.USB概念 2.USB协议发展 3.USB接口类型 3.1 TYPE类型 3.2 Mini类型 3.3 Micro类型 4. USB体系结构和关键概念 4.1 USB工作原理 4.2 USB物理拓扑结构 4.3 USB逻辑拓扑结构 4.4 USB软件架构 4.5 USB数据流模型 4.5.1 USB设备端点 4.5.2 USB管道 4.6 USB即插…

网工内推 | 国企信息工程师,信息系统项目管理师优先,最高14薪

01 上海浦东软件园股份有限公司 &#x1f537;招聘岗位&#xff1a;信息化管理工程师 &#x1f537;岗位职责&#xff1a; 1. 根据公司战略、数字化总体架构规划和IT 技术趋势&#xff0c;制定信息化系统的规划与设计&#xff0c;并制定实施计划。 2. 统筹公司信息化系统管理…

Redis-实战篇-缓存击穿问题及解决方案

文章目录 1、缓存击穿2、常见的解决方案有两种&#xff1a;2.1、互斥锁2.2、逻辑过期2.3、两种方案对比 3、利用互斥锁解决缓存击穿问题3.1、ShopServiceImpl.java3.2、使用 jmeter.bat 测试高并发 4、利用逻辑过期解决缓存击穿问题 1、缓存击穿 缓存击穿问题 也叫 热点key问题…

LeetCode 2741.特别的排列:状压DP

【LetMeFly】2741.特别的排列&#xff1a;状压DP 力扣题目链接&#xff1a;https://leetcode.cn/problems/special-permutations/ 给你一个下标从 0 开始的整数数组 nums &#xff0c;它包含 n 个 互不相同 的正整数。如果 nums 的一个排列满足以下条件&#xff0c;我们称它是…

<电力行业> - 《第4课:什么是电力?什么是发输变配用5环节?》

1 什么是电力&#xff1f; 我们对于平日生活中离不开的电很熟悉&#xff0c;但是电力是什么&#xff1f; 其实&#xff0c;电力就是电能作为动力的能源。电力就是我们说的电&#xff0c;不过更多了系统化。 19世纪70年代&#xff0c;电力的发明和应用掀起了第二次工业化高潮。…

关于WebSocket

WebSocket 与传统的 HTTP 协议对比 在实时通信领域&#xff0c;传统的 HTTP 协议存在以下一些问题&#xff1a; 频繁的请求和响应&#xff1a;每次通信都需要建立和关闭连接&#xff0c;带来额外的开销。高延迟&#xff1a;每次通信都需要经过多个网络层的传输&#xff0c;延…