现在有这样一个需求:
你的页面为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.这样我们最终的目的就达到了。