项目场景:
在使用 Ant Design Vue组件库更改Modal对话框样式使用深度作用选择符不生效。
问题描述
Modal对话框官方样式如下图:
现在要修改为下图所示样式:
使用深度作用选择符样式没有生效。
原因分析:
因为modal是直接插入到body元素中的,脱离了父元素。所以写在局部的样式,则不能在body下面脱离了父组件的模态框去生效,只能在你父组件下对应的地方生效。
解决方案:
第一种
既然是插入到了body中,就全局修改样式,但是这种方法会使整个程序中的Model样式改变(样式污染)。
第二种
通过ref="mymodal" :getContainer = '()=>$refs.mymodal' div /deep/ 要改样式的类名