在 Vue项目中,当一个组件使用了 scoped 特性时,组件内的样式只会应用于组件自身。但是有时候我们需要在 父组件中改变子组件中的样式,这时就需要用到深度选择器。

一、/deep/

<style scoped>
/* 子组件的样式 */
.child-component {
  color: red;
}

/* 父组件的样式,穿透子组件样式 */
/deep/ .child-component {
  color: blue;
}
</style>

二、>>>

.search-input >>>.el-input__inner{
	border: 0 !important;
	text-indent: 20px;
}

三、::v-deep(Vue3 ::deep)

<style scoped>
.parent {
  /* 父组件的样式 */
}

/* 无法修改子组件中过来的样式 */
.parent .child-component {
  background-color: red;
}

/* 可以使用 ::v-deep 解决样式穿透问题 */
.parent ::v-deep .child-component {
  background-color: red;
}
</style>

四、注意

在 Vue 3 中 ::v-deep 被废除了,取而代之的是 ::deep 伪选择器。推荐

 

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐