react使用fix固定定位弹窗时位置发生偏移解决方案

问题描述：

如图，底部是固定操作按钮，居中对齐，点击“发布日历”时会出现确认弹窗，但是发现了问题，按钮会集体往右边移动一小段。

检查后发现原因：是底部操作栏的宽度是页面宽度，不包括滚动条，弹窗时出现遮罩，滚动条消失页面宽度会出现小幅增加，所以按钮会发生右移。

原样式：

//js文件
<div className={styles.fixBotBarWrap}>
     <Button>预览</Button>
     <Button type="primary">发布日历</Button>
     <Button>保存</Button> 
     <Button>关闭</Button>
</div>

//样式文件
.fixBotBarWrap{
  position: fixed;
  width:100%;
  bottom: 0;
  left:0;
  z-index:999;
  background: #F2F2F2;
  border-top:1px solid #E1E6E3;
  height: 55px;
  line-height: 55px;
  text-align: center;
  :global(.ant-btn){
    margin-top: 10px;
  }
}

修改方案：1、使用state记录宽度，底部div使用状态值而不是直接获取宽度 2、窗体宽度改变