vue项目修改组件库默认样式

修改默认样式

一般来说，对于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{}

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