实用问题解决之React+antd（1）

最近在开发React+umijs+antd的项目，由于是初学，在此记录遇到的障碍问题和方法【第一期】

1、使用qiankun时发现，子应用的样式会影响主应用。如何解决？

场景：引入子应用成功后，页面除了显示相应内容外，还改变了侧边栏和页头的部分样式。原本以为是新产品要求有多标签页导致页面高度变窄、出现滚动条，但是这些原因都不会改变字体大小，所以确认是沙箱的样式隔离未作用于子、主应用间。

1）设置 strictStyleIsolation 为true：问题未解决 ✖
参考 qiankunAPI，在config文件设置qiankun时，增加属性strictStyleIsolation: true。父应用的页面样式确实不会被改变，但子应用的点击事件似乎都不生效，大概率是因为影响了布局。

2）设置 experimentalStyleIsolation : true：问题未解决 ✖
父应用的页面样式不会被改变，子应用页面也都正常，除了子应用弹窗 —— 弹窗内所有样式设置都没有了。原因：参考 微前端方案 qiankun 的样式隔离能不用就别用吧

3）父应用主动适配：问题解决 ✔
可以考虑上面的参考方案，采用css module，更改父应用的className设置形式，但这种方法仅限于子应用class重名的情况。如果子应用改的是antd全局样式，那就只能在父应用里给被污染的全局样式设置 !important 。

qiankun: {
   
   
  master: {
   
   
    prefetch: true,
    sandbox: {
   
   
      // strictStyleIsolation: true,
      // experimentalStyleIsolation: true
    }
  }
}

.ant-layout-sider-children {
   
   
      padding-bottom: 0 !important;
}

2、使用antd组件时，如何满足产品要求的选择框下拉支持全选的功能？

场景：根据组件库文档可知，全选功能需要自主开发。

即，在dropdownRender里自定义ReactNode。注意，需要考虑各种选择/取消选择/回显的情景闭环。

展开下拉框即触发全选按钮是否被选中

onDropdownVisibleChange={
   
   (flag