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

现在有这样一个需求：

你的页面为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.这样我们最终的目的就达到了。