微前端如何做样式隔离？

微前端如何做样式隔离？

摘要

在主应用和子应用上分别使用 div 元素插入一段标题，两个 div 元素使用相同的 class 名 title，分别在 class 中设置文字颜色，主应用 color 值为 yellow，子应用为 red。

由于子应用的样式晚于主应用加载，所以主应用的样式会被覆盖。

以上问题在同时加载多个子应用时也会存在：各个应用之间也可能存在同名的 className 或者给相同条件的选择器添加了样式， 那么最终只有优先级最高的样式才会生效。要确保应用之间的样式不会互相影响，就需要对应用间的样式进行隔离。