micro-app环境下，子系统加载vxe-table样式被吞解决方法

卖关子

本地没问题啊，怎么发上去就没样式了呢？

“不应该啊”，“我本地不这样啊”，“怎么回事”，“神奇”。

1.0

先搜索有没有人遇到过类似的问题，找到了这个提问：

在微前端框架micro-app的子应用中使用vxe-table主题样式失效

不过我看了一下，不管怎么样setTheme方法都会调用的，html标签上也出现了属性data-vxe-ui-theme="light"

该有的属性设置是有的，那就要研究一下样式为什么不生效了

2.0

在源代码里面搜索，其实是有相关css文件的，属性设置也有，样式文件也有，但是因为什么原因没生效？

猜测一下：

Micro-app里面具有样式隔离

看官方文档：

虽说基座应用样式可以影响子应用，但是子应用引用的vxe-table下载下来的css样式会出现在子应用的标签里面。

导致的现象是，原本的样式选择器是：

[data-vxe-ui-theme=light]{
    ...
}

在生效的时候实际上是

micro-app[name=xxx] [data-vxe-ui-theme=light] {
    ...
}

其中所有选择器都被加上了micro-app[name=xxx]的前缀。

至此，我们知道，想要实现样式选择，需要把data-vxe-ui-theme=light属性加在子应用里面。

3.0

看一下源码是怎么加属性设置的，照葫芦画瓢一下

这是源码里面的实现，在html标签上添加了属性documentElement.setAttribute('data-vxe-ui-theme', theme);。

那同理可得，我们在micro-app-body标签添加data-vxe-ui-theme即可。

function setTheme(name) {
  var theme = !name || name === 'default' ? 'light' : name;
  themeConfigStore.theme = theme;
  if (typeof document !== 'undefined') {
    var documentElement = document.documentElement;
    if (documentElement) {
      documentElement.setAttribute('data-vxe-ui-theme', theme);
    }
  }
  return VxeCore;
}

解决方案

在子应用的App.vue中添加下列代码：

 computed: {
    isMicroAppEnvironment() {
      return window.__MICRO_APP_ENVIRONMENT__;
    },
  },
 methods: {
    setVxeTableTheme() {
      if (!this.isMicroAppEnvironment) return;
      // data-vxe-ui-theme="light" 用于vxe-table样式回显
      const ele = document.querySelector("micro-app-body");
      ele.setAttribute("data-vxe-ui-theme", "light");
    },
  },