vue加scoped后無法修改樣式（無法修改element UI 樣式）

有的時候element提供的默認的樣式不能滿足項目的需要，就需要我們隊標簽的樣式進行修改，但是發現修改的樣式不起作用

第一種方法

原因：scoped 
解決方法：去掉scoped 

注意：此時該樣式會污染全局樣式，可以把它放在公共的css里面 
為了不讓所有的 el-input標簽都是該樣式，可以在HTML給改input加上一個類名，比如 modInput 

第二種方法

在不去掉scoped 的情況下

在全局樣式中覆蓋，這種解法，有弊端，可能會污染全局樣式。為了不污染全局樣式，也可單獨加個類名

比如在引用全局樣式前引用element ui的樣式

第三種方法

樣式放到app.vue里面 或者入口文件 index.vue ，樣式就生效了 為了不污染其他頁面樣式，可單獨加個類名

第四種方法

使用深度作用選擇器，可以通過vue-loader提供的新寫法  vue-loader 寫法如下（先安裝，在使用）：

<style lang="scss" scoped>
    .a >>> .b {
     /* ... */
    }
</style>

某些預處理器（如Sass）可能無法>>>正確解析。在這些情況下，您可以使用/deep/組合器 - 它是別名，>>>並且完全相同。

<style lang="scss" scoped>
　　.form {
　　　　background-color: #fff;
　　　　/deep/ .list{
　　　　　　font-size: 18px;
　　　　}
　　}
</style>

sass注意要用 /deep/ ,而無法使用 >>> 這個符號。

通過 v-html 創建的 DOM 內容不受作用域內的樣式影響，但是你仍然可以通過深度作用選擇器來為他們設置樣式 。

第五種方法

也許你遇到過這種情況，需要修改某一個ui框架的默認樣式，但是在scoped的style塊中修改不成功。不得不將style塊的scoped屬性拿掉，或者將這個要改變的樣式放進全局樣式里再在main.js中導入，或者直接將樣式定義在App.vue里面。這些都是可行的，但是要注意命名空間要是正確的，不然是找不到樣式的。
這里提供另一種方法。其實在vue的SFC中，是允許多個style塊的。建議外層加一個單獨的類, 以免影響其他文件樣式。

你可以像下面這樣使用：

<style scoped lang="scss">
    .order-detail {
        // 本地樣式
    }
</style>
<style lang="scss">
   .wrap {
    　　　　.el-form-item__label{
　　　　　　    // 你想修改的element-ui里的樣式
        　　}
　　}
</style>

 

————————————————
版權聲明：本文為CSDN博主「boy火巨」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_42221334/article/details/88533329