一、引入Vant Weapp后樣式問題

? ? ? ? 在項目中使用第三方組件修改css樣式時,總是出現各種各樣問題,修改的css樣式不起作用,沒有效果,效果不符合預期等。

• 栗子(引入一個搜索框組件)
• 實現效果:? 左側有一個搜索文字背景為藍色,接著跟一個搜索框

wxml

<view class="container"><view class="search"><view slot="action" bind:tap="onSearch" class="title">搜索</view><van-search value="{{ value }}" placeholder="請輸入搜索關鍵詞" use-action-slot="true" bind:search="onSearch" class="input"></van-search></view>
</view>

wxss

.container {width: 750rpx;height: 150rpx;background-color: bisque;display: flex;align-items: center;
}.search {width: 680rpx;height: 64rpx;background: #03C5B0;border-radius: 68rpx 68rpx 68rpx 68rpx;display: flex;flex-direction: row;margin-top: 24rpx;margin-left: 32rpx;
}.title {width: 80rpx;height: 64rpx;font-size: 28rpx;font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;font-weight: 500;color: #FFFFFF;line-height: 33rpx;display: flex;align-items: center;justify-content: center;
}.input {width: 600rpx;height: 64rpx;
}

emmm...明明我們css都寫了,這出現的是什么鬼

?

審查一下頁面布局看看,這個我也沒看懂,應該是組件自帶的樣式跟我們寫的沖突了.(只是猜測)

二、樣式覆蓋

2.1 使用外部樣式類

? ? ? ? 那么我們要怎樣覆蓋掉原有的樣式呢?

官方也有說明:

外部樣式類的相關知識背景請查閱微信小程序文檔

Vant Weapp 開放了大量的外部樣式類供開發者使用，具體的樣式類名稱可查閱對應組件的“外部樣式類”部分。

需要注意的是普通樣式類和外部樣式類的優先級是未定義的，因此使用時請添加!important以保證外部樣式類的優先級。

?2.2?實現

wxml

<view class="container"><view class="searchCopy"><view slot="action" bind:tap="onSearch" class="titleCopy">搜索</view><van-search value="{{ value }}" placeholder="請輸入搜索關鍵詞" use-action-slot="true" bind:search="onSearch" custom-class="inputCopy"></van-search></view>
</view>

?wxss

/* 樣式覆蓋 */
.container {width: 750rpx;height: 150rpx;background-color: bisque;display: flex;align-items: center;
}.searchCopy {width: 680rpx;height: 64rpx;background: #03C5B0;border-radius: 68rpx 68rpx 68rpx 68rpx;display: flex;flex-direction: row;margin-top: 24rpx;margin-left: 32rpx;
}.titleCopy {width: 80rpx;height: 64rpx;font-size: 28rpx;font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;font-weight: 500;color: #FFFFFF;line-height: 33rpx;display: flex;align-items: center;justify-content: center;
}.inputCopy {width: 600rpx !important;height: 64rpx !important;
}

?兩種方式實現對比,效果立竿見影,看起來順眼多了

?

注:定義外部樣式類css后一定要寫!important

2.3 查看外部樣式類

? 每個組件最下方都表明了可覆蓋的外部樣式類