在使用uniapp框架開發(fā)微信小程序時，使用到了uni-ui的uni-table組件。由于需要修改表頭的背景色，于是乎在微信開發(fā)工具中使用調試工具審查元素獲取其class名：
嘗試直接在頁面中修改樣式：
.uni-table-th {
background-color: #ddd;
}
結果無效。于是嘗試使用深度選擇器
::v-deep .uni-table-th {
background-color: #ddd;
}
依然無效。然后查詢微信平臺官方開發(fā)文檔得知，微信中的組件存在組件樣式隔離，即自定義組件的樣式只受到自定義組件 wxss 的影響。
此時如果想在其它頁面影響到該組件的樣式，需要在施加影響的組件中加入選項：
options: {
styleIsolation: 'shared', // 解除樣式隔離
}
shared表示頁面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會影響頁面和其他設置了 apply-shared 或 shared 的自定義組件。（這個選項在插件中不可用。）
根據(jù)以上設定，我們可以在想要改變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"，如下所示：文章來源：http://www.zghlxwxcb.cn/news/detail-787381.html
<script lang="ts">
export default {
options: {
styleIsolation: 'shared', // 解除樣式隔離
},
}
</script>
<script lang="ts" setup>
...
</script>
總結
如果發(fā)現(xiàn)直接修改uni-ui或其它第三方組件的樣式無效，有以下兩種方法可以嘗試：文章來源地址http://www.zghlxwxcb.cn/news/detail-787381.html
- 在選項中加入
styleIsolation: 'isolated'來達到解除樣式隔離的目的； - 全局修改。
到了這里，關于【uniapp】在微信小程序中修改uni-ui組件樣式不生效的解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
