vue项目中element-ui等UI组件自定义样式不生效的解决
程序员文章站
2022-03-28 15:06:55
...
引
在使用element-ui
的时候虽然默认的样式已经能够满足很多的需求了,但是有总是有时候要加上些自定义的需求。不过,有的时候样式写上去了,按理说应该是没错的,但却是不生效呢。
其实在vue
项目中使用第三方框架的时候,都是可能会出现这个问题的,原因就是,vue
中有scoped
可以声明了样式是在组件范围内生效的。从而避免不同组件的样式污染,但大多数人写的都是带scoped
的,所以样式的在scoped
域内没生效。
解决方法:
一.去掉scoped
直接把<style lang="less" scoped>
中的scoped
去掉就可以使样式生效,虽简单粗暴但却不是个很好的方法。
二.使用深作用选择器
css中使用>>>
作深作用选择器
<style scoped>
.box >>> .el-input {
width: 60px;
}
</style>
less中使用/deep/
作深作用选择器
<style lang="less" scoped>
.avatar-uploader /deep/ .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
}
</style>
三.使用全局样式
定义一个全局样式,如global.css
,然后在main.js
中导入,如此这个样式就全局挂载了,在其中写的自定义样式也会生效。