微信小程序如何修改第三方組件樣式 例如 vant-weapp樣式修改

解除樣式隔離

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

Component({
  onLoad(){},
  options: {
    styleIsolation: 'isolated'
  }
})

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

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

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

{
  "styleIsolation": "isolated"
}

注意：如果使用的不是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;
}