Tencent / wujie

极致的微前端框架
https://wujie-micro.github.io/doc/
Other
4.16k stars 596 forks source link

复用主应用的css样式,子应用不生效问题 #870

Open yumengzhong opened 5 months ago

yumengzhong commented 5 months ago

描述bug "wujie-vue3": "1.0.21" "vue": "3.3.11", "vite": "5.0.10", "ant-design-vue": "^3.2.15", "tailwindcss": "^3.2.4",

想复用主应用的css样式,在主应用的html文件添加了style样式,子应用中使用其css类名没有效果。 但是在主应用通过 :root 定义的变量,子应用是能拿到(或说 能生效)的。

通过文档和其他issue,wujie 的css样式是自动隔离的,但也有css样式是全局生效的,目前我没有实现子应用复用主应用的样式,请前辈和大佬们,帮忙指出是我的配置问题、使用问题,或者对无界的理解问题

如何复现 无界的配置

  <WujieVue
    width="100%"
    height="100%"
    :name="name"
    :props="{ ...childProps, ...props }"
    :url="url"
    :alive="true"
    :fiber="false"
  />

给出详细的复现步骤

  1. 在主应用的html文件增加style代码
    <style>
    :root {
      --primary-color-X: #d03322; // 子应用中可以使用
    }
    .css1 { // 子应用使用,没有效果
      background-color: blueviolet !important;
      color: aquamarine !important;
    }
    </style>
  2. 子应用能继承到--primary-color-X,但是设置的.css1没有效果
    <h3 class="text-[--primary-color-X] css1 css2">
      设置的css1没有效果
    </h3>

错误截图 image

最小复现仓库或者地址 重要!!!,请尽量给出复现仓库,这样能极大加快bug解决速度