vue3项目样式穿透

平时开发时,会去使用第三方的组件库,遇到样式跟设计稿不符合时,我们往往需要使用样式穿透去修改第三方组件库的样式,因为之前接触的都是vue2的项目,最近写vue3项目时,样式穿透照样用了vue2的写法,效果能出来,但是,vscode里面会有警告提示。

后面才知道原本是因为vue3跟vue2的写法有所不一样。

1. vue2写法

::v-deep .van-tabbar--fixed {
  height: 67px;
}

2. vue3写法

:deep(.van-popup--center) {
  border-radius: 6px;
}