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中導入，如此這個樣式就全局掛載了，在其中寫的自定義樣式也會生效。