【uniapp】在微信小程序中修改uni-ui组件样式不生效的解决方案

在使用uniapp框架开发微信小程序时，使用到了uni-ui的uni-table组件。由于需要修改表头的背景色，于是乎在微信开发工具中使用调试工具审查元素获取其class名：

尝试直接在页面中修改样式：

.uni-table-th {
    
    
	background-color: #ddd;
}

结果无效。于是尝试使用深度选择器

::v-deep .uni-table-th {
    
    
	background-color: #ddd;
}

依然无效。然后查询微信平台官方开发文档得知，微信中的组件存在组件样式隔离，即自定义组件的样式只受到自定义组件 wxss 的影响。
此时如果想在其它页面影响到该组件的样式，需要在施加影响的组件中加入选项：

  options: {
    
    
    styleIsolation: 'shared', // 解除样式隔离
  }

shared表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

根据以上设定，我们可以在想要改变uni-ui组件的组件中加入该选项，样式就正常被修改了。

但其实，还有更方便的改法：直接全局修改。当然最好加上容器以免污染其它组件的样式，除非这是一个通用样式。
由于我的修改是应用于所有该类型组件的，所以我选择了全局修改。
具体来说我的做法是，在全局样式文件global.scss中加入想要修改的样式：

.uni-table-scroll {
    
    
	&.table--border {
    
    
		border: 1px solid $border-color;
		border-bottom: 1px solid $border-color;
	}
	.uni-table-tr:nth-child(odd) {
    
    
		background-color: $table-odd-td-bgcolor;
	}
}

然后在uni.scss中引入即可：

@import "@/static/scss/common/global.scss";

补充

如果你在项目中使用的是组合式api+ts，那么正常情况下是没有选项的，这时候可以在<script lang=ts setup>的上方再加一个script标签，然后往里面添加选项即可，需要注意的是，新增的script标签也需要添加lang="ts"，如下所示：

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

总结

如果发现直接修改uni-ui或其它第三方组件的样式无效，有以下两种方法可以尝试：

1. 在选项中加入styleIsolation: 'isolated'来达到解除样式隔离的目的；
2. 全局修改。