uniapp开发中遇到自定义组件样式在h5中生效，在小程序中不生效的情况

问题描述

使用uniapp+vue3开发微信小程序，项目中使用uv组件，对uv组件用深度选择器修改样式，但无效。

.custom-collapse{
	::v-deep .uv-cell__body{padding:0 !important;}
}

样式并没有生效

分析

在查阅官方文档后发现，默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：

• 指定特殊的样式隔离选项styleIsolation 。
• webview 渲染下，在 app.wxss 或页面的 wxss 中使用标签名选择器（或一些其他特殊选择器）来直接指定样式会影响到页面和全部组件。通常情况下这是不推荐的做法。

{
  "styleIsolation": "isolated"
}

自定义组件中的 styleIsolation 它支持以下取值：

• isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
• apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
• shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

解决方法

在组件中将styleIsolation值设置为shared

<script>
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>

重新编译后样式生效了