解決vant 無法修改元件的樣式問題

2021-10-13 21:33:09 字數 818 閱讀 4470

二、成功的方法(定義乙個全域性的樣式檔案)

在vue中,常規寫style都會加上scoped,以避免全域性汙染,但是加上了scoped會導致無法修改 vant ui框架元件本身的樣式,但是scoped是不能省略的。為了解決這個問題,本人嘗試了多種方法都不行,最後,通過新建乙個新的css檔案並匯入當前vue頁面的方式得以解決。

**如下(示例):

/deep/

.van-tx

**如下(示例):

:

:v-deep.van-tx

**如下(示例):

>>

>

.van-tx

執行後,以上三種方法都沒有改變vant元件樣式。

在assets目錄內新建乙個css檔案,專門存放這些需要被重新修改的樣式**. 並且以元件的類名來進行維護。 最後引入乙個全域性css檔案即可。操作如下圖:

執行後,成功修改樣式。

Ant Design Vue 修改元件樣式

專案中要求使用ant design vue作為第三方ui框架,但是設計圖上的要求與ui框架官網的有細微的差別,需要手動修改,當時我的想法就是先f12開啟控制器自己先修改樣式,改好以後連樣式名和樣式一起複製到上直接加上就好了,但並沒有成功,現在提出我找到的解決方法 第一種就是檢視文件上面是否提供了可供...

vue修改元件樣式

vue可以使用多個style,可以第乙個設定scoped,第二個設定想要修改的第三方元件的樣式,每個vue檔案設定不同.container class名,然後包裹修改的第三方ui元件樣式。當我們希望scoped樣式中的乙個選擇器能夠作用得 更深 子元件也可以用scoped中的樣式 例如影響子元件,你...

css元素居中以及修改元件庫的樣式

1.在專案中遇到使用css讓塊元素 在父元素中上下左右居中顯示text align center position absolute 元素居中顯示css left 50 top 50 webkit transform translate 50 50 transform translate 50 50...