问题描述

<template>
  <div class="input">
    <el-input type="textarea" v-model="content"/>
  </div>
</template>

<style scoped lang="scss">
.input {
  .el-textarea {
    textarea {
      border: none;
    }
  }
}
</style>

以上代码编译结果，textarea标签是element组件生成的，加了[data-v-dd074dc4]选择器所以不会生效

.input .el-textarea textarea[data-v-dd074dc4] {
  border: none;
}

解决方法

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

目前（2022/11/21）最新版Vue3使用::v-deep 操作符会提示：

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead.

原因是::v-deep操作符已经被弃用，改为:deep(expression)操作符即可:

.a .b:v-deep { /* ... */ }

// 修改为

.a :deep(.b) { /* ... */ }

参考：https://vue-loader.vuejs.org/zh/guide/scoped-css.html