【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";

总结

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

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