0


如何修改Element-UI的默认样式?

学习过程中在使用Element-UI组件库时,想要修改其默认样式,学习到了几种方法,在这里分享给大家!

首先要知道使用该组件库后,可以在检察工具中查看到class的,这是组件库给我们加上去的,不是我们自己写的,我们就可以利用组件库添加的class来修改样式。

比如下面第一张图是我添加的一个组件库,第二张图红框中就是组件库自己添加的标签。我们可以利用红框中的标签的class来修改样式。

大多数小伙伴在使用vue时,肯定在style标签上加了scoped属性,这个属性是为了我们组件私有化,让当前组件的样式不影响到其他组件,如果你的style标签加了scoped这个属性,那么当你直接在这里面修改样式是不会成功的,因为Element-UI的样式是定义在全局中,使用scoped时,局部样式会被全局样式覆盖,那么有以下方法可以解决这个问题:

1、去掉scoped

这个方法是完全可以的,但去掉scoped后有可能会污染全局样式。

2、vue支持多个style

没想到把,直接再写一个style就可以了,既不影响scoped里的样式,又修改了Element-UI的默认样式。

3、深度选择器

vue提供了深度选择器(deep选择器),格式是 ‘父标签的class’ /deep/ ‘要修改的标签的class’,在有scoped的style标签里也有用。还有两种写法是 ::v-deep 和 >>>。

效果:(修改了宽高和背景颜色)

以上就是修改Element-UI默认样式的方法,deep选择器很好用,大家用起来!

标签: vue.js elementui

本文转载自: https://blog.csdn.net/huiaixing/article/details/123856821
版权归原作者 Deca~ 所有, 如有侵权,请联系我们删除。

“如何修改Element-UI的默认样式?”的评论:

还没有评论