vue3.2使用ant design vue 的modal时遇到的样式问题

1、antdv中的大部分组件样式都可以使用":deep"直接修改，但modal这个组件有点特殊，用这个方法没有效果，scoped,但是去掉scoped后又会使样式穿透，所以使用以下方法：

  <div ref="modal">
    <a-modal 
    v-model:visible="visible"
    :keyboard="true" 
    @ok="handleOk"
    @cancel="cancel" 
    width="1025" 
    :centered="true" 
    :getContainer="() => $refs.globalModal">
      <div></div>
    </a-modal>
  </div>
​
<style lang="less" scoped>
:deep(.ant-modal) {
  height: 634px;
  padding-bottom: 0;
}
<style>

解读：

• 需要在外部包一个div ，ref=“modal”
• 调用antdv 的 getContainer api ===>:getContainer=“() => $refs.globalModal”
• 利用:deep 更改样式

2、我使用了less的嵌套，所以在这里还存在一个问题，这个组件的样式如果使用嵌套也不会生效，需要拆开分开来写。

:deep(.ant-modal) {
  height: 634px;
  padding-bottom: 0;
}
​
:deep(.ant-modal-content) {
  margin-bottom: 50px;
}
​
:deep(.ant-modal-header) {
  border-bottom: none;
}
​
:deep(.ant-modal-body) {
  height: 510px;
  padding: 30px 40px 0 40px;
}
​
:deep(.ant-modal-footer) {
  height: 70px;
  border-top: none;
}