微信小程序如何修改第三方组件样式例如 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;
}

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

微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一.自定义组件 1.创建组件 2.引用组件 3.组件和页面区别 4.组件样式 5.data.methods.properties 6.小程序的 data 和 properties 区别 7. ...
五分钟学会在微信小程序中使用 vantUI 组件库
前言我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
大家好,这是小程序系列的第九篇文章,从这篇开始我们将进入提高篇,在这一个阶段,我们的目标是可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序 ...
微信小程序引入骨架屏组件
微信小程序引入骨架屏组件参考地址:https://github.com/cytle/ma-skeleton.git 1.克隆项目 2.把项目里的组件skeleton文件复制到自己的项目里 3.复制& ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...

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

解除样式隔离

外部样式类定义

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

最新文章

热门文章

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

解除样式隔离

外部样式类定义

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

最新文章

热门文章

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

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