vue中style scoped的意義 以及 修改外來組件(比如element)的樣式

在這裏插入圖片描述
這就導致我們想更改一些引用的組件的css的時候,無法成功。
比如說我用了element的一個摺疊組件,想改變他的顏色。
調試的時候我能在這裏改變這些屬性,但是如果在vue的style中的修改確是無效的。
在這裏插入圖片描述
在這裏插入圖片描述
解決辦法:

使用深度選擇器,既不破壞別的組件的css,也能覆蓋當前組件。

    .el-collapse-item >>> .el-collapse-item__header{
        background-color: rgb(217, 237, 247);
    }

注意如果這裏是scss或者cass,不能用>>>而是用deep,而且不能並列寫而是有層級關係!

.el-collapse-item {
    /deep/ .el-collapse-item__header{
        background-color: rgb(217, 237, 247);
    }
}

參考鏈接:

https://segmentfault.com/a/1190000009802725
https://juejin.im/post/5cf488ea518825378867758f#heading-1
https://www.cnblogs.com/CyLee/p/10006065.html】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章