search

umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.
https://qiankun.umijs.org
MIT License
15.87k stars 2.02k forks source link

如何通过主应用控制子应用的样式 #1844

Open LuoHongXin opened 3 years ago

LuoHongXin commented 3 years ago

Background

主子应用都是 vue 项目，目前都是用 antd 组件库，但是主应用的通过 webpack-theme-color-replacer 换肤或 modifyVars 修改antd 组件样式不起效，看控制台，发现虽然主应用的样式文件已经修改成换肤后或修改后的样式，但子应用的 antd 因为没有修改，所以子应用的 antd 样式文件覆盖了主应用修改后的样式。

Proposal

希望能够通过主应用控制子应用的样式，让整个项目的样式统一起来，实现换肤的效果

gongshun commented 3 years ago

父子应用通信，子应用同步调用 modifyVars

EchoLsx commented 2 years ago

子应用不单独对外的话，可以考虑只在开发环境引入样式，这样生产环境就可以继承主应用样式

lesliele commented 2 years ago

请问最后怎么解决呢

LuoHongXin commented 2 years ago

请问最后怎么解决呢 每个子应用的App.vue的created时期，根据主应用传过来的主题色去改变子应用自己的主题色，并监听这个主题色的变量，若果有改变就重新调用修改主题色的方法去修改当前的子应用主题色

lesliele commented 2 years ago

可以了

xinnai commented 2 years ago

@lesliele 您是用什么方案修改的主题色，有没有demo能看一下？