4Ark
·
uni-app 多端组件属性与样式透传行为一致性实践
💡
原文中文，约2100字，阅读约需5分钟。
📝
内容提要
一款基于微信小程序的uni-app应用在编译后出现样式问题，因启用style scoped导致父组件样式无法渗透子组件，造成不同端表现不一致。通过调整组件结构和样式隔离设置，最终配置virtualHost和styleIsolation，解决了样式优先级问题。
🎯
关键要点
- 一款基于微信小程序的uni-app应用在编译后出现样式问题，因启用style scoped导致父组件样式无法渗透子组件。
- 通过调整组件结构和样式隔离设置，最终配置virtualHost和styleIsolation，解决了样式优先级问题。
- App端和微信小程序端的样式隔离实现方式不同，微信小程序使用带有[data-v-scopeId]的class来实现隔离。
- 为了解决样式不一致的问题，可以选择强制所有组件变成多根节点或配置virtualHost和styleIsolation。
- 配置virtualHost: true和styleIsolation: 'shared'后，微信小程序的表现与其他端一致。
- 样式优先级问题仍然存在，主要由于微信小程序加载css顺序的问题。
➡️
