微信小程序-组件样式覆盖

现在有这样一个需求：

你的页面为home.wxml,你用到了一个组件比如modal.wxml，但是当你把组件引入过来的时候，却发现样式需要做调整？

这下没辙了，我用别人的组件还可以修改别人的样式吗。这样不会破坏人家写的代码了吗？

别担心，微信小程序的设计者们考虑到了这个问题。下面介绍如何覆盖你用的样式。好了，别废话了，我们直接上主题吧。

尴尬的处境：(home.wxml)

这个模态框我想把它的高度增加，调试了下发现需要覆盖这个样式：

我查阅了网上资料发现都是兜圈子，没抓住问题本质，云里雾里！太浪费时间！这里我要墙裂吐槽一下！

1.找到你引用的组件（或者你自定义的组件），打开xxx.js:

打开这个组件的页面，并找到你想要重写class的那部分：

2.发现这个组件对外提供样式重写的类的数组里面没有这个类名，这时候，我们可以在externalclass中添加一个类名：i-modal-body暴露给父组件，让其对该类进行重写：

3.这样，在我们的最后的home.wxml上这样覆盖类:

4.在你的home.wxss上编写.my_modal_body，覆盖max-height属性值：

5.这样我们最终的目的就达到了。

微信小程序-组件样式覆盖相关推荐

微信小程序组件样式修改
微信小程序checkbox.radio.button.switch.swiper组件样式(CSS)修改 1.checkbox样式修改 /*checkbox整体大小*/ checkbox {width: ...
微信小程序 vant 样式覆盖与定制主题
3种方式修改组件样式 1. 解除样式隔离直接在页面的样式文件中覆盖样式 wxml: <van-button type="primary">主要按钮</van-b ...
微信小程序组件样式隔离
Component({options: {styleIsolation: 'isolated'} }) styleIsolation可选参数 isolated 组件和调用页面相互不会影响 apply ...
【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
微信小程序 - 组件化开发
微信小程序 -- 组件化开发,总结一下开发思路及过程: 组件,类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成. 1.首先,在 miniprogram 文件夹下,创建一个 ...
微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...

微信小程序-组件样式覆盖

微信小程序-组件样式覆盖相关推荐

最新文章

热门文章