遵义网站制作的网站网站建设建站在线建站

最近使用uniapp+vue3+uview-plus开发微信小程序中，使用uview-plus自定义底部导航栏tabbar时，遇到修改默认样式不生效问题

使用传统的 ::v-deep、:deep、::v-deep，或者style标签中去掉scoped也是无效的，有好的方案欢迎交流，解决方案如下：

<script lang="ts">
export default {options: { styleIsolation: 'shared' }
}
</script><script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from 'pinia'
import { useTabbarStore } from '@/stores'const tabbarStore = useTabbarStore()
const { list, activeTab } = storeToRefs(tabbarStore)const tabbarProps = ref({value: activeTab,border: false,zIndex: 999,activeColor: "#333",inactiveColor: "#7A7E83",fixed: true,placeholder: true,safeAreaInsetBottom: true
})const handleChange = (index: number) => {tabbarStore.setActiveTab(index)uni.switchTab({url: list.value[index].pagePath})
}
</script>
<style lang="scss">::v-deep .u-tabbar__content {border-top-left-radius: 46rpx;border-top-right-radius: 46rpx;box-shadow: 0px 0px 10rpx 4rpx rgba(0, 0, 0, 0.08);.u-tabbar__content__item-wrapper {height: 78rpx;}.u-tabbar-item__text {font-size: 22rpx;font-family: PingFang-SC;}}
</style>