uniapp 二次封装ui组件加class样式或修改样式在微信小程序不生效的情况
原因:首先不论是自定义组件还是ui组件,本质上的原因都是微信小程序默认的组件隔离策略导致的。
组件样式隔离
默认情况下,自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况:
- 指定特殊的样式隔离选项
styleIsolation
。 - webview 渲染下,在
app.wxss
或页面的wxss
中使用标签名选择器(或一些其他特殊选择器)来直接指定样式会影响到页面和全部组件。通常情况下这是不推荐的做法。
{ "styleIsolation": "isolated" }
自定义组件 JSON 中的 styleIsolation
选项从基础库版本 2.10.1 开始支持。它支持以下取值:
isolated
表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);apply-shared
表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;shared
表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了apply-shared
或shared
的自定义组件。(这个选项在插件中不可用。)
使用后两者时,请务必注意组件间样式的相互影响。
如果这个 Component 构造器用于构造页面 ,则默认值为 shared
,且还有以下几个额外的样式隔离选项可用:
page-isolated
表示在这个页面禁用 app.wxss ,同时,页面的 wxss 不会影响到其他自定义组件;page-apply-shared
表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式不会影响到其他自定义组件,但设为shared
的自定义组件会影响到页面;page-shared
表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式会影响到其他设为apply-shared
或shared
的自定义组件,也会受到设为shared
的自定义组件的影响。
示例:
<template> <view class="confirm-modal"> <u-modal :show="show" :title="title" :showConfirmButton="false"> <view class="slot-content"> <slot name="content"></slot> </view> </u-modal> </view> </template> <script> export default { props: { title: { type: String }, showModal: { type: Boolean, default: false } }, computed: { show() { return this.showModal } }, options: { styleIsolation: 'shared' // 解除样式隔离 }, data() { return {} }, methods: {} } </script> <style lang="scss"> // 弹窗 /deep/.confirm-modal { .u-modal { .slot-content { width: 100%; } } } </style>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通