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

骑猪看日落 2023-07-20 15:00 57阅读 0赞

*注： 必须css文件才可以修改*

##### 解除样式隔离 #####

1、在组件内部`options`属性中定义`styleIsolation: 'apply-shared'`

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

> app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。

> 指定特殊的样式隔离选项 styleIsolation 。  
> [官方地址][Link 1]

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']
    })

<custom-component my-class="red-text" />
    <custom-component my-class="large-text" />
    
    <custom-component my-class="red-text large-text" />
    .red-text {
      color: red;
    }
    .large-text {
      font-size: 1.5em;
    }

4、组件样式定义,在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式  
[vant-weapp文档][vant-weapp]

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

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB
[vant-weapp]: https://youzan.github.io/vant-weapp/#/custom-style