python messagebox排版,element MessageBox组件 如何修改样式(字体大小等)

正好组内的小伙伴儿也遇到了这样的问题,使用jsx语法自定义一个msgbox,自定义msgbox自然需要自定义样式,然后就遇到了自定义customClass不生效的问题。

先分析下为什么不生效,this.$msgbox($alert等等),是通过element-ui的方法在body下渲染出来一个class="el-message-box__wrapper"的div。如果你看过源码就知道,这div根本就不是一个vue组件,只是使用js操作dom 生成的一些节点元素。![message-box 节点渲染](/img/bVcIulT)

所以不具备vue组件的一些特性:如在渲染templage模板时,不会在节点上添加data-v-xxxxxx 之类的属性,而scoped 正是运用data-v-xxxxxx属性找到对应的元素实现局部样式控制的。所以不生效是必然的。

为什么加 /deep/不生效呢,不过是css样式上加上了属性选择器[data-v-xxxxxx] 本质上还是从vue组件的角度来实现的样式注入,前面分析过了 message-box 本身就不是一个vue组件,所以也是不能生效的。

解决办法:

scoped不生效,那么只能将样式放全局,在当前组件加上一段不带scoped的style,或者放到全局样式表中。

.custom-class {

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值