在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