修改默认样式

一般来说,对于el-card这样的自带标签,可以设置几个全局样式

但是如果想要修改默认样式,可以先通过查找网页源代码,找到对应元素,看它拥有的选择器,直接copy一下改样式就行了

如果没有合适的选择器,就加个类之类的。
在这里插入图片描述
一般是不推荐从局部改默认样式,这样会在打包的时候样式出错,最好不要在局部中用el-card这样的类。

如果你想用,又不想改变打包后的样式可以使用深度作用选择器

在组件内这样修改是不行的
在这里插入图片描述
不是权重的问题。可以使用!important提高优先级
在这里插入图片描述
有些样式还是修改不了。

全局和局部样式

如果你用类名的方式发现没有在对应元素上找到你新写的css。
检查一下是否是局部样式,很有可能虽然你用的这个element组件是用在局部的,样式却设置在全局的。

解决方案2

在需要修改的样式选择器前加::v-deep

在这里插入图片描述

原理解析

同一组件的元素有相同的属性data-v–hash,同一组件的元素的hash是一样的
使用scoped的样式会在解析后添加属性选择器

.parent{color: red};

解析后

.parent[data-v-51sa51]{color: red};

这样就不会影响组件外的元素,也就影响不到子组件的元素
组件库使用时相当于子组件
注意,组件的最外层拥有两个hash,父组件的该组件的hash,所以父组件样式可以作用子组件的最外层


.a .b. .c .d{};

解析后

.a .b .c .d[data-v-51sa51]{};

如果d是子组件的类,abc是父组件的类,那么这个属性就无法与子组件的hash对应

使用深度作用选择器后

.a[data-v-51sa51] .b .c .d{}

这样就能够作用子组件也能够修改组件库的默认样式,而且不会修改其它组件的样式

Logo

前往低代码交流专区

更多推荐