如何修改vant元件中原有樣式?

2022-05-05 03:30:09 字數 977 閱讀 5950

<

template

>

<

div

class

="menu"

>

<

van-dropdown-menu

>

<

van-dropdown-item

v-model

="value1"

:options

="option1"

/>

van-dropdown-menu

>

div>

template

>

<

script

>

export

default

, ,,]

}}}script

>

<

style

lang

="less"

>

style

>

(1)使用谷歌瀏覽器開啟元件繪製的頁面;

(2)f12,開啟控制台;

(3)滑鼠點選紅框所在位置的按鈕,並選取待修改元件部分,獲得如下圖所示情況,可從下圖中看到待修改元件的style,檢視樣式,根據元件中樣式的類名。

(4)在元件所在vue檔案的style中或新增less檔案,對樣式進行修改; 、

(5)例如修改所選vant元件的字型顏色和字型大小,修改方式如下:

<

style

lang

="less"

>

.menu /deep/ .van-dropdown-menu__title

style

>

(6)結果如下圖:

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

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

vue裡面父元件如何修改子元件樣式

一去掉 scoped 二混用本地和全域性樣式 三使用深度作用選擇器 在使用 vue 的開發中,我們有時會引用外部元件,包括 ui 元件 elementui iview 當 全域性樣式 style scoped 本地樣式 style 我們把 需要修改子元件的樣式 寫在上面那個全域性樣式裡面 三 使用深...

vue裡面父元件如何修改子元件樣式

2018年01月17日 16 44 50 閱讀數 3462 在使用 vue 的開發中,我們有時會引用外部元件,包括 ui 元件 elementui iview 當有些像 sass 之類的預處理器無法正確解析 這種情況下你可以用 deep 操作符取而代之 這是乙個 的別名,同樣可以正常工作。ok,主要...