uniapp+vue3+uview-plus修改默认样式

最近使用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>
相关推荐
断墨先生4 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai5 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~10 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端14 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86814 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165022 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app