使用框架开发微信小程序时，用到了uni-ui的uni-。由于需要修改表头的背景颜色，所以我使用微信开发工具中的调试工具检查元素得到它的名字：

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

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

结果无效。所以尝试使用深度选择器

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

仍然无效。然后查询微信平台官方开发文档得知微信中的组件有组件样式隔离，即自定义组件的样式只受自定义组件wxss影响。

此时如果要影响其他页面上组件的样式，需要给受影响的组件添加选项：

options: { styleIsolation: 'shared', // }

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

根据上面的设置，我们可以在想要改变uni-ui组件的组件上加上这个选项，样式就可以正常修改了。

但其实还有一种更方便的修改方法：直接全局修改。当然，最好添加容易避免污染其他组件的样式，除非这是通用样式。

因为我的更改适用于该类型的所有组件，所以我选择全局更改。

具体来说，我的做法是在全局样式文件.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或者其他第三方组件的样式无效，有两种方法可以尝试：

在中加入：''微信开发小程序没有看到组件，达到解除风格隔离的目的；全局修改。