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>
相关推荐
王哈哈的学习笔记6 小时前
uniapp小程序使用echarts
前端·小程序·uni-app
yrldjsbk6 小时前
uniapp小程序开发入门01-快速搭建一个空白的项目并预览它
uni-app
JavaDog程序狗8 小时前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
七七小报8 小时前
uniapp-商城-42-shop 后台管理 分包
前端·uni-app
七七小报12 小时前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app
xuanjiong15 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
flying robot16 小时前
uniapp: 低功耗蓝牙(BLE)的使用
uni-app
程序猿John16 小时前
uniapp跳转和获取参数方式
前端·javascript·uni-app
七七小报1 天前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
七七小报1 天前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app