uni-app子组件样式穿透在微信小程序端和H5端效果不一致
uni-app子组件样式穿透在微信小程序端和H5端效果不一致
如图,我对 uni-popup
进行一层封装,默认 .defaultClass
在 H5 端有效,但是在小程序端 DOM class 有 defaultClass
字样,但是 styles 里没有的。
如果想要在小程序上面生效,就要在最外面的页面 Vue 文件的 style 里穿透才行,如图:
疑问:
- 为什么
defaultClass
在 H5 端有效,在小程序端无效? - 我的目的是
common-modal
封装uni-popup
,让弹窗的内容是圆角,但现在要在父页面写穿透样式的话,我封装的带圆角弹窗组件就不能通用了,有其他方式实现?
更多关于uni-app子组件样式穿透在微信小程序端和H5端效果不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
试过了没有用。刚刚找到问题所在了,是因为小程序的样式隔离导致, 在封装的组件中设置样式隔离为shared,让其影响uni-popup,这样封装的组件的defaultClass就生效了
<script> export default { options: { styleIsolation: 'shared' } } </script>