动态切换class

样式穿透

需要覆盖三方组件库时，需要用到样式穿透:deep()Vue3写法

参考

1. vue项目四种样式穿透实现 (opens new window)

// 对class: favorite-project-box, 进行样式穿透，
// 覆盖vant组件中.van-list__finished-text,.van-list__loading两个样式
<style lang="less" scoped>
  :deep(.favorite-project-box) {
    width: 100%;
    box-sizing: border-box;
    padding: 0.15rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .van-list__finished-text,
    .van-list__loading {
      width: 100% !important;
    }
  }
</style>