vue無法覆蓋vant的UI組件的樣式怎么解決

這篇“vue無法覆蓋vant的UI組件的樣式怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue無法覆蓋vant的UI組件的樣式怎么解決”文章吧。

無法覆蓋vant的UI組件的樣式

有時(shí)候UI組件提供的默認(rèn)的樣式不能滿足項(xiàng)目的需要，就需要我們對(duì)它的樣式進(jìn)行修改，但是發(fā)現(xiàn)加了scoped后修改的樣式不起作用。

解決方法

使用深度選擇器，將scoped樣式中的選擇器“深入”，即影響子組件

<style scoped>
  .a >>> .b { /* ... */ }
</style>

以上的代碼會(huì)編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

注意：如果你使用了Less或Sass等預(yù)處理器，可能無法>>>正確解析。

在這些情況下，您可以使用組合/deep/或::v-deep組合 - 兩者都是別名，>>>并且工作完全相同。

使用Less或Sass等預(yù)處理器的寫法如下：

.van-radio {
  /deep/ .van-radio__label {
    width: 500px;
  }
}

使用樣式穿透,強(qiáng)制覆蓋Vant原樣式

使用Vant組件的時(shí)候，我們會(huì)發(fā)現(xiàn)在某些場(chǎng)合組件的原樣式不符合我們的需求，這個(gè)時(shí)候我們就需要重寫組件的原樣式。

這個(gè)是組件的原樣式

因?yàn)閟tyle標(biāo)簽添加了scope屬性，scope會(huì)保護(hù)樣式不被污染，這里要讓我們自己的樣式生效就必須使用樣式穿透，由父樣式穿透到子樣式：

.w-all >>> .van-field__control{text-align: right;}

在瀏覽器可以看到

• text-align：left那一欄已經(jīng)被一條橫線劃掉，取而代之的是：

而這個(gè)，就是因?yàn)槭褂昧藰邮酱┩笍?qiáng)制覆蓋了原樣式，從而實(shí)現(xiàn)我們需要的樣式效果。

以上就是關(guān)于“vue無法覆蓋vant的UI組件的樣式怎么解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。