vue局部修改组件css样式方法

局部修改组件样式方法

假设我在一个组件里引用了一个组件 引用的组件第一层样式class为 play-list
其子层有一个class为section-content 现在我要在引用该组件时修改section-content样式 同时做到只是局部修改组件样式
首先style框必须加上 scoped 才能做到局部修改

vue 2.0写法

<style lang="scss" scoped>
.play-list{
  /deep/ .section-content{
    width: 80%;
    margin-left: 160px;
  }
}
</style>

vue3.0 /deep/会报错 改成如下写法

<style lang="scss" scoped>
.play-list{
  ::v-deep(.section-content){
    width: 80%;
    margin-left: 160px;
  }
}
</style>