在Vue3的项目里,组件库用的是Ant-design 3.2+版本
修改样式
需求是需要修改原生的 modal 样式
如果直接用类名 .ant-modal-body 去修改样式,会发现无法修改。因为默认不支持修改高度和外边距padding
所以需要:先通过 挂载元素 再css穿透/deep/ .ant-modal-body{} 修改样式,这样不会影响到别的页面中modal中的样式。
关键点:
ref="mymodal" ,
:getContainer = '()=>$refs.mymodal' ,
div /deep/ .ant-modal-body{ }
示例如下:
<template><div class="cumuDownModal" ref="mymodal"><a-modal :visible="visible" :getContainer = '()=>$refs.mymodal'><div>hahahh</div></a-modal></div>
</template>
<style lang="less" scoped>div /deep/ .ant-modal-body{padding: 0;}
</style>
参考博客:https://www.cnblogs.com/SunshineKimi/p/14690763.html