在vue項目中,如何修改框架或者引用的第三方庫的組件樣式呢?
修改不了的原因:
<style>標簽添加了scoped屬性,它的 CSS 只作用於當前組件中的元素,自然權重是小於全局樣式的,所以,樣式覆蓋不了
解決方法:
1.去掉
<style>標簽的scoped屬性,即使用全局樣式

2.使用深度作用選擇器
/deep/,使用方式:將/deep/+space空格添加在第三方樣式類的前面。如果是使用less語法的話,直接在第三方樣式的最外一層添加一遍/deep/就可以了
注意事項:如果/deep/添加多了,google瀏覽器下會報警告,需要打開控制台的Elements,ctrl + f查找/deep/,搜索到了的話,需要在對應的css位置刪除掉


/deep/ .classnamefromother {
/*css樣式代碼...*/
}
參考原文鏈接:
https://blog.csdn.net/weixin_41000111/article/details/80450397
參考官方網址:
https://vue-loader.vuejs.org/zh/guide/scoped-css.html#子組件的根元素
