更改 ant design vue 更改modal样式 vue3.0

antd中大部分组件的样式都可以使用/deep/直接修改，但modal这个组件有点特殊，用这个方法没有效果，最后用了以下方法：

html：
  <div ref="globalModal">
      <a-modal
        v-model:visible="visibleLogoutModal"
        :width="400"
        title="自动登出提醒"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :getContainer="() => $refs.globalModal"
        @cancel="closedModal"
      >
      ...
      </div>

css：

  :deep(.ant-modal) {
      border-radius: 6px;
      overflow: hidden;
       }

步骤：
1.需要在外部包一个div ref=“globalModal”
2.调用getContainer api :getContainer=“() => $refs.globalModal”
3.利用deep 对于css进行样式更改

补充：
关于为什么deep原理：
首先要搞明白 scoped 的原理。在 Vue 单文件组件 (.vue 文件）中给 style 标签加上 scoped 属性，然后里面定义的样式规则就会只作用于当前组件，不会影响到其他组件。这是怎么做到的呢？

原理也很简单，加上 scoped 属性后，在浏览器查看开发工具你会发现，组件模板里的每个 DOM 元素多了一个属性 data-v-xxx，CSS 规则也有对应的属性选择器。这些属性名就是组件的唯一 ID，每个组件都不一样。配合 CSS 属性选择器，样式规则就只应用到对应的组件了，这样就能防止互相干扰了。

deep 的原理就是将属性选择器里的属性移到上层，这样就能作用到所有子元素了。

参考：https://my.oschina.net/u/173474/blog/4461496