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

注： 必须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;
}