vue项目修改组件库默认样式
修改默认样式,可以从外部引入css,写在main.js中,达到全局引入也可以在任意一个没写scoped的style中使用如果想要只改变当前组件的默认样式,就需要使用深度作用选择器在使用element-ui等组件库的时候,需要修改默认样式在组件内这样修改是不行的不是权重的问题。可以使用!important提高优先级有些样式还是修改不了。后来发现。
修改默认样式
一般来说,对于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{}
这样就能够作用子组件也能够修改组件库的默认样式,而且不会修改其它组件的样式
更多推荐
所有评论(0)