single-spa 子应用切换时样式冲突怎么解决？

这个问题太经典了，Ant Design 和 Element Plus 确实容易打起来。我之前也碰到过，说白了就是全局样式污染。

最直接的解决方案是在子应用里给样式标签打标记，卸载时删掉。

先在子应用的入口文件这样改造：

// 给样式标签打标记的辅助函数

const styleTagId = 'element-plus-styles'; // 每个子应用要不同



function mountStyles() {

  const styles = document.querySelectorAll('style,link[rel="stylesheet"]');

  styles.forEach(style => {

    if (!style.dataset.microApp) {

      style.dataset.microApp = styleTagId;

    }

  });

}



function unmountStyles() {

  const styled = document.querySelectorAll(style[data-micro-app="${styleTagId}"],link[data-micro-app="${styleTagId}"]);

  styled.forEach(style => style.remove());

}

然后在你的生命周期里调用：

export async function bootstrap(props) {

  return Promise.resolve();

}



export async function mount(props) {

  mountStyles(); // 加载后标记样式

  // ...你的渲染逻辑

}



export async function unmount(props) {

  // ...你的卸载逻辑

  unmountStyles(); // 卸载时清理样式

}

不过这个方案有个问题，就是首次加载时 UI 库的样式还没打标记。我一般是这样处理：在子应用入口用 JS 动态创建 style 标签，把 CSS 内容直接灌进去，这样样式就在你掌控之中了。

更省心的办法是用现成的库。single-spa 社区有个 single-spa-css 插件，你装一下然后在子应用配置里加上，它会自动帮你管理样式的加载和清理，基本不用自己写清理逻辑。

如果还嫌麻烦，可以直接给每个子应用套个唯一的 class 前缀，然后用 PostCSS 的插件自动给所有选择器加前缀。不过这个改动比较大，Ant Design 和 Element Plus 这种级别的库改起来要谨慎。

我个人推荐先用第一种手动标记的法子，改动最小，先把问题解决了再说。