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

解除樣式隔離

1、在組件內部options屬性中定義styleIsolation: 'apply-shared'

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

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

指定特殊的樣式隔離選項 styleIsolation 。
官方地址

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

{"styleIsolation": "apply-shared" }

注意：如果使用的不是vant-weapp 需要在組件中開放全局定義類控制樣式 vant-weapp默認開啟了權限

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

外部樣式類定義

3、使用外部樣式類定義,盡量不要定義普通樣式類 ,無優先級區分

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。