Ant Design Vue 中对 modal 组件使用样式穿透不生效的问题

822 阅读1分钟

参考了这两篇回答:

1.# ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法

2.# 如何修改 antd vue 单个组件的默认样式

Antd Vue的modal组件默认并非挂在根结点(id=app的节点)上,此时你修改的样式是不会应用到这个组件的,因为这个组件的模板不在 #app 节点中。

21712569322_.pic.jpg

此时需要借助Ant Design Vue 提供的一个ApigetContainer将这个组件挂载回#app 节点。

41712569476_.pic.jpg

<div ref="modal">
    <a-modal
      :getContainer="() => $refs.modal as HTMLElement"
      ...
    >
    </a-modal>
 </div>

此时就可以对其进行修改了