element-ui难点 深度穿透,模态框弹出商品添加,到主页面,模态框把商品删除,放到主页面

element-ui难点 深度穿透

今天做项目碰到一个小需求就是要给模态框的顶部加上蓝色的框(模态框是白色的)
但是客户要求使用element-ui来写,所以只能用element-ui给的模态框
上来是这个样子的
在这里插入图片描述
这是给模态框设置了头部为蓝色之后,模态框会带一圈白边
但是客户要求是这样子的:
在这里插入图片描述
本人试了好多方法来去掉模态框的边框

.el-dialog__header {
  padding: 0% !important; /* 去掉默认的内边距 */
}

发现不行
解决方案:

使用深度穿透,来修改element-ui人家组件写好的样式(这里有点牛b)

只需要在人家写好的样式前面加::v-deep 注意是双冒号
然后就可以修改人家组件的样式了最后代码是这样的
::v-deep .el-dialog__header {
padding: 0% !important; /* 去掉默认的内边距 */
}
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值