qiankun框架之CSS样式隔离-终结篇

在利用qiankun整合公司管理系统时，遇到最坑的莫过于：css样式污染，那看下最常见的解决方案是利用qiankun自带的css沙箱做隔离

this.microApp = loadMicroApp(
  { apps infos ... },
  {
    sandbox: {
      strictStyleIsolation: true // 严格沙箱
      experimentalStyleIsolation: true // 实验性沙箱
    }
  }
)
复制代码

1. 严格沙箱

在加载子应用时，添加strictStyleIsolation: true属性，实现形式为将整个子应用放到Shadow DOM内进行嵌入，完全隔离了主子应用

缺点：

子应用的弹窗、抽屉、popover因找不到主应用的body会丢失，或跑到整个屏幕外（具体原因作者并未详细研究）
主应用不方便去修改子应用的样式

2. 实验性沙箱

在加载子应用时，添加experimentalStyleIsolation: true属性，实现形式类似于vue中style标签中的scoped属性，qiankun会自动为子应用所有的样式增加后缀标签，如：div[data-qiankun-microName]

缺点：

子应用的弹窗、抽屉、popover因插入到了主应用的body，所以导致样式丢失或应用了主应用了样式

3.将css以namespace方式打包子项目(和实验性沙箱类似)

# npm install postcss-selector-namespace -D

const selectorNamespace = require('postcss-selector-namespace');

//在webpack中postcss-loader中加入

{
    loader: require.resolve('postcss-loader'),

    options: {

        postcssOptions: {

        ident: 'postcss',

        config: false,

        plugins: [

            selectorNamespace({

            namespace: '.web-app-pms',

        }), ]
    }
}

缺点：

子应用的弹窗、抽屉、popover因插入到了主应用的body，所以导致样式丢失或应用了主应用了样式

4.针对子应用（antd）弹窗、抽屉、popover问题，导致的样式丢失，最终用以下方法解决（前提是结合了上面方法），参考如下：

幸运的是我们的项目刚好用了antd，antd有自带的全局化配置组件，刚好可以解决这个问题

ReactDOM.render(
    <ConfigProvider locale={zh_CN} getPopupContainer={() => document.getElementById('app')} >
        <App />
    </ConfigProvider>
)