vue项目中element-ui等UI组件自定义样式不生效的解决

引

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