在使用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"，如下所示：文章来源：https://www.toymoban.com/news/detail-787381.html
<script lang="ts">
export default {
options: {
styleIsolation: 'shared', // 解除样式隔离
},
}
</script>
<script lang="ts" setup>
...
</script>
总结
如果发现直接修改uni-ui或其它第三方组件的样式无效，有以下两种方法可以尝试：文章来源地址https://www.toymoban.com/news/detail-787381.html
- 在选项中加入
styleIsolation: 'isolated'来达到解除样式隔离的目的； - 全局修改。
到了这里，关于【uniapp】在微信小程序中修改uni-ui组件样式不生效的解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
