欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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中导入,如此这个样式就全局挂载了,在其中写的自定义样式也会生效。