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

解决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.lryc.cn/news/382808.html

相关文章:

  • 黑产当前,如何识别异常图片?
  • 数据模型(models)
  • 【CS.AL】算法核心之贪心算法 —— 力扣(LeetCode)743. 网络延迟时间 - Dijkstra算法题解
  • 25、架构-微服务的驱动力
  • JeecgFlow事件网关概念及案例
  • 使用鸿蒙HarmonyOs NEXT 开发 快速开发 简单的购物车页面
  • iOS 中 attribute((constructor)) 修饰的函数
  • 原生js实现图片预览控件,支持丝滑拖拽,滚轮放缩,放缩聚焦
  • C语言入门课程学习笔记9:指针
  • 借助 Cloudflare D1 和 Drizzle 在 Astro 上实现全栈
  • SUSE linux 15的网络管理
  • 海康威视-下载的录像视频浏览器播放问题
  • 养殖自动化管理系统:开启智慧养殖新篇章
  • SmartEDA革新来袭:融合Multisim与Proteus精髓,引领电子设计新纪元!
  • 【FFmpeg】AVFormatContext结构体
  • 【SpringSecurity】认证与鉴权框架SpringSecurity——授权
  • 深入解析FTP:原理、架构与搭建方式
  • Springboot与RestTemplate
  • 端口发布与暴露
  • Unity:使用Texture2D动态创建的图像无法正常显示 / 修改图像后未生效
  • 【LinuxC语言】详解TCP/IP
  • 数字化转型下的企业人力资源信息系统研究
  • docker camunda 8.5 部署步骤
  • 学懂C#编程:常用高级技术——委托(Delegate)应用场景——委托与Lambda表达式的结合使用详解
  • 05-java基础——循环习题
  • 网络安全等级保护测评
  • 真有被这套零售数据分析方案惊艳到
  • 亚马逊卖家为何需要自养账号?揭秘背后的原因
  • 牛了,LSTM+Transformer王炸结合创新,荣登Nature,精度高达95.65%
  • Java面试题:通过实例说明工厂模式和抽象工厂模式的用法,以及它们在解耦中的作用