>>>
- 引入第三方组件后,如果需要局部修改第三方组件的样式,而又不想去除
scoped
属性造成组件之间的样式污染,这时候就可以用>>>
穿透scoped
了 - 如果vue的style使用的是css,那么则:
<style scoped lang="css">
.menuItem {
>>> .ant-input {
border-radius: 50px;
font-size: 14px;
height: 30px;
}
}
</style>
/deep/
- 但是像
scss
等预处理器却无法解析>>>
,这时候我们可以使用下面的方式.
<style scoped lang="scss">
.menuItem {
/deep/ .ant-input {
border-radius: 50px;
font-size: 14px;
height: 30px;
}
}
</style>
::v-deep
- 但是有些开发者反应,在vue-cli3编译时,deep的方式会报错或者警告,这时候我们可以使用下面的方式.
<style scoped lang="scss">
.menuItem {
::v-deep .ant-input {
border-radius: 50px;
font-size: 14px;
height: 30px;
}
}
</style>