Vue項目中更改Vux組件中的樣式

因為某些樣式不符合自己要求，需要更改Vux組件內部樣式.

初次嘗試

• 在單文件vue中定位到組件
  

• 找到需要修改的類名，然后在單文件中直接覆蓋

<style lang="less" scoped>
.popup-picker-no-line  .weui-cells:before {
  border-top: none;
}

.popup-picker-no-line  .weui-cells:after {
  border-bottom: none;
}
</style>

• 經過多番實驗，發現就是不生效，原來是Vue自動添加了一些東西，導致解析不到，問題就是這個scope，父組件的樣式將不會滲透到子組件中。
• 所有的scoped中的css最終編譯出來都會變成這樣：
  .popup-no-line[data-v-45660598] .weui-cells[data-v-45660598]

方案1：全局style

• 既然找到問題所在，那么將scope直接去掉，影響太大，可以將這個改寫的類放到不帶有scope的css文件中。
• 放到common.less 中,終於生效了

.popup-picker-no-line  .weui-cells:before {
  border-top: none;
}

.popup-picker-no-line  .weui-cells:after {
  border-bottom: none;
}

方案2：使用深度選擇器

• 語法：/deep/ 對應 >>> 但是有些解釋器可能識別不了>>>,可以使用/deep/替代。
• 這種寫法的好處是，不影響其他vue文件，只影響自己的子組件。

<style scoped>
.popup-picker-no-line /deep/ .weui-cells:before {
  border-top: none;
}

.popup-picker-no-line /deep/ .weui-cells:after {
  border-bottom: none;
}
</style>

• 參考

總結：還是使用深度選擇器比較好，比較靈活。