咕笛說vue 把「樣式穿透」原理和方法說透

當我們在vue專案中引用到第三方元件時，比如element-ui,常常需要更改某些元素的樣式，但如果使用常規的css樣式覆蓋的方式是經常無效的，那麼我們就要用到「樣式穿透」的方法。這一節咕笛老師來詳細講解一下這個魔改樣式的大殺招~

在乙個元件中，我們定義元件樣式一般寫在頁面的最下方,以style包裹

為了不汙染全域性樣式，我們在style上加乙個scoped修飾符，這個樣式就只在當前元件的範圍內有效

css

但這是如何作到在當前元件範圍內有效的呢？我們開啟f12，檢視一下元素的dom結構就可以看出端倪：

在每個dom元素上，有乙個data-v-******xx的識別符號，這個識別符號就是保證scoped有效的根本！我們定位到button上，檢視css樣式：

我們看到元素後面被加上了[data-v-******xx]屬性，這也就是css的屬性選擇器，只有擁有這個屬性的元素或類才會應用此樣式。每個元件下[data-v-******xx]這個id值是一致的，所以限制了其作用範圍。

這個方法是基於postcss的，關於postcss可以看其官網的介紹，這裡就不多講了。postcss官網->

清楚了這個原理之後，我們就可以解釋為什麼很多第三方元件引入進來，通過常規的css樣式覆蓋是無效的，因為該元件是scoped，父元件是觸及不到其內部的樣式的！

那我們要是必須要改變第三方元件的樣式要怎麼辦呢？這裡就要說「樣式穿透」的方法了。

所謂樣式穿透，就是在父級元件中強制去修改子級元件的內部樣式，注意這裡的父子層次並不一定是一級，可能是很多級。

具體要怎麼作呢？按不同的css的渲染器寫法也是不同的。

普通的css語法: 在要修改的樣式前新增》符號

css border:none;}

scss語法: 在要修改的樣式前新增 ::v-deep

css

::v-deep .el-card__header

sass語法/less語法 : 在要修改的樣式前新增 /deep/

css

.wrap /deep/ .el-card__header

為啥要有這三種不同的寫法？？因為不同的編譯解析器識別的語法不同，寫錯會報錯。

好了，這一節內容就講到這裡，特別提醒一下，樣式穿透在vue開發中使用的會比較頻繁，但是要注意作用範圍，最好避免全域性下樣式穿透修改元件樣式。