This post was updated 685 days ago and some of the ideas may be out of date.
问题描述
<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) { /* ... */ }
参与讨论