vue项目中/deep/的用法-vue-cli中没法覆盖样式解决方法

星月前端

3147人浏览 · 2022-08-07 22:35:33

星月前端 · 2022-08-07 22:35:33 发布

在vue-cli项目中，我们在二次覆盖样式的时候会遇到这个问题，就是在控制样式的时候，复制了类名，但是设置了样式会没有。

解决方式：在样式前面加一个 /deep/

<style lang="less" scoped>
.Home-container {
  padding: 46px 0 50px 0;
  .van-nav-bar {
    background-color: #007bff;
    color: white;
  }
  // 需要加 /deep/ 才能控制到它
  /deep/ .van-nav-bar__title{
  color: white;
  }
}
</style>

具体可以总结如下图：

/deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。

如果想让某些样 式对子组件生效，可以使用 /deep/ 深度选择器。

注意：/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^