注： 必須css文件才可以修改

解除樣式隔離

1、在組件內(nèi)部options屬性中定義styleIsolation: 'apply-shared'

Component({onLoad(){},options: {styleIsolation: 'apply-shared'} })

app.wxss 或頁(yè)面的 wxss 中使用了標(biāo)簽名選擇器（或一些其他特殊選擇器）來(lái)直接指定樣式，這些選擇器會(huì)影響到頁(yè)面和全部組件。通常情況下這是不推薦的做法。

指定特殊的樣式隔離選項(xiàng) styleIsolation 。
官方地址

2、也可以在頁(yè)面或自定義組件的 json 文件中配置 styleIsolation （這樣就不需在 js 文件的 options 中再配置）main.json

{"styleIsolation": "apply-shared" }

注意：如果使用的不是vant-weapp 需要在組件中開(kāi)放全局定義類控制樣式 vant-weapp默認(rèn)開(kāi)啟了權(quán)限

/* 組件 custom-component.js */ Component({onLoad(){},options: {addGlobalClass: true,} })

外部樣式類定義

3、使用外部樣式類定義,盡量不要定義普通樣式類 ,無(wú)優(yōu)先級(jí)區(qū)分

/* 組件 custom-component.js */ Component({onLoad(){},externalClasses: ['my-class'] }) <!-- 頁(yè)面的 WXML --> <custom-component my-class="red-text" /> <custom-component my-class="large-text" /> <!-- 以下寫法需要基礎(chǔ)庫(kù)版本 2.7.1 以上 --> <custom-component my-class="red-text large-text" /> .red-text {color: red; } .large-text {font-size: 1.5em; }

4、組件樣式定義,在頁(yè)面中使用 Vant Weapp 組件時(shí)，可直接在頁(yè)面的樣式文件中覆蓋樣式
vant-weapp文檔

<van-button type="primary">主要按鈕</van-button> /* page.wxss */ .van-button--primary {font-size: 20px;background-color: pink; }

總結(jié)

以上是生活随笔為你收集整理的微信小程序如何修改第三方组件样式 例如 vant-weapp样式修改的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。