elementui 修改组件样式无效问题

最新推荐文章于 2024-10-02 23:52:20 发布

STARSHOME火星

最新推荐文章于 2024-10-02 23:52:20 发布

阅读量1.7k

点赞数 1

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/qq_36539696/article/details/122211903

版权

在Vue项目中遇到使用Element UI的Tree组件时，发现节点被点击或悬停时背景变为白色。尝试直接修改CSS样式无效，即使使用!important也不起作用。解决方案是通过添加::v-deep穿透选择器，并确保style标签有scoped属性，才能正确覆盖Tree组件的默认样式。最终成功改变了Tree节点的背景颜色。

摘要由CSDN通过智能技术生成

我这里是遇到了vue中使用element的tree组件，发现鼠标点击和悬浮在tree上时，tree的背景变成白色了
一开始直接用css对象重新改变样式，发现无效，即使是用!important也无效，先贴代码

  .box_Video_list {
    height: 1041px;
    .el-tree {
      background: none;
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      .el-icon-caret-right:before {
        color: #657180;
      }
    }
    ::v-deep .el-tree {
      // background-color: #f5f5f5;
    }
    ::v-deep.el-tree-node__content {
      &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
      }
    }
    ::v-deep.el-tree-node.is-current > .el-tree-node__content {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }
  }

后面加了穿透::v-deep才生效
这里的style lang=“less” ，记得给style加上scoped属性，不然::v-deep也无效