uniapp组件样式 H5有效 小程序不生效

最近在练手uniapp，写了个电子商城，写到了商品详情组件 detail.vue ，因为内容诸多，就拆开了几个组件来写，其中包括选择商品的 组件product.vue ，同时因为这个弹出层可以复用，我就新建了一个自定义组件 popUp.vue，并通过插槽的形式，可以写成不同样式的弹出层

图1.popUp组件.jpg

所以组件层级是 detail > product > popUp，
一切都是那么的合理
待到写完之后，在H5端预览了，完全没问题，结果一编译到小程序，样式居然失效了

图2.H5端(左)和小程序端(右).jpg

开始我试过重启小程序开发工具，结果依旧

最后排查了许久，发现是因为我想通过弹出层组件的类名来选择它下面的子类的时候，编译到小程序居然不生效

图3.product.vue.jpg

解决方法就是删掉 图3 139行的 .popUp ，不要用 .popUp 去选择下面的子类，就解决了

image.png