【微信小程序】修改uni-ui组件样式或子组件样式穿透失效的问题

问题描述

使用uniapp+vue开发微信小程序，项目中使用uni-ui组件，但是uni-ui的组件不能满足设计稿样式，于是尝试在页面中结合深度选择器修改样式，但无效。

分析

官方参考文档：参考微信小程序官方文档可知——在微信小程序中，默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。
因此，实际上问题点在于，微信小程序里在父组件中写的样式产生了样式隔离，没有办法在子组件里生效。
在问题描述的例子里，uni-ui组件对于引用uni-ui组件的组件来说是子组件，因此同样无法生效。

解决方法

指定特殊的样式隔离选项 styleIsolation——默认为isolated，我们将它修改为shared。

<script lang='ts'>
export default {
    
    
   options: {
    
    
       styleIsolation: 'shared', // 解除样式隔离
   }
}
</script>

如果你在项目中使用的是组合式api+ts，这时候需要再增加一个script标签，往里面添加选项即可。

<script setup lang="ts">
import {
    
    ref} from 'vue'
const count = ref<Number>(0)
//……业务代码
</script>

<script lang='ts'>
export default {
    
    
   options: {
    
    
       styleIsolation: 'shared', // 解除样式隔离
   }
}
</script>