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

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

antd中大部分组件的样式都可以使用:deep直接修改，但modal组件不行
方法：
1.在外部包一个div ref=“globalModal”
2.调用getContainer api :getContainer=“() => $refs.globalModal”
3.利用:deep 对于css进行样式更改

<div ref="globalModal">
        <a-modal v-model:visible="open" :footer="null" @ok="hideModal" :getContainer="() => $refs.globalModal">
            <p>Bla bla ...</p>
            <p>Bla bla ...</p>
        </a-modal>
</div>

<style>
:deep(.ant-modal .ant-modal-header) {
    border-radius: 0;
    background-color: rgba(19, 118, 160, 1);
}
</style>

补充：

1. 深度选择器 deep（又称为 /deep/、>>>）是用于在 Vue
   单文件组件中选择嵌套子组件中的元素的一种方式。它可以突破作用域限制，使得样式规则能够影响到子组件中的元素。
2. 在 Vue 单文件组件中，当我们给 style标签添加 scoped 属性时，Vue 会自动生成一个唯一的属性选择器，如
   data-v-xxxxxx，并将其附加到组件模板内的每个元素上。这样做的目的是为了确保样式仅对当前组件生效，避免样式污染其他组件。
3. 但是，在某些情况下，我们可能需要在父组件中定义的样式也应用于子组件的元素，这时就可以使用 deep。
4. deep 允许样式规则穿透组件边界，作用于子组件的元素。具体原理是，在带有 scoped 属性的样式规则中使用 deep
   关键字时，它会将该样式规则中的选择器扩展到子组件的元素上。

关于为什么deep原理：

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

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

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