vue3 elementplus menu background-color

Question

官方文档说：https://element-plus.org/zh-CN/component/menu.html#menu-attributes

background-color	菜单的背景颜色（十六进制格式）（已被废弃，使用--bg-color）

现在我把样式改成了

:root {
  --header-height: 50px;
  --bg-color: #001529;
}

.basic-layout {
  //  父元素相对定位
  position: relative;

  .nav-side {
    position: fixed;
    // 菜单固定宽度
    width: 200px;
    height: 100vh;
    overflow-y: auto;
    color: #fff;
    background-color: var(--bg-color);
    // 菜单展开关闭动画
    transition: width 0.5s;
    .logo {
      display: flex;
      align-items: center;
      height: 50px;
      font-size: 18px;
      img {
        width: 32px;
        height: 32px;
        margin: 0 16px;
      }
    }
    .nav-menu {
      height: calc(100vh - var(--header-height));
      // 这里使用 var 的方式
      background-color: var(--bg-color);
      border: none;
    }
  }

  .content-right {
    // 菜单收缩需要变化
    margin-left: 200px;

    .nav-top {
      display: flex;
      justify-content: space-between;
      height: 50px;
      padding: 0 20px;
      line-height: 50px;
      border-bottom: 1px solid #ddd;
    }

    .wrapper {
      height: calc(100vh - var(--header-height));
      padding: 20px;
      background: #eef0f3;

      .main-page {
        height: 100%;
        background: #fff;
      }
    }
  }
}

安装文档说的改了之后，表面上一级菜单是变成了蓝黑色了，但是二级菜单却依旧是白色；而原先直接在el-menu里加background-color属性设置颜色的却还是可以，而且下级的菜单颜色也随之变化，这是因为啥

Answer 1

河畔一角 2023-06-18 01:19:40

官方文档设置了：background-color="#545c64"、text-color="#fff"、active-text-color="#ffd04b"

你代码里面的背景色可以删除了，用el-menu自带的属性即可。参考如下：

https://element.faas.ele.me/#/zh-CN/component/menu    <el-menu      default-active="2"      class="el-menu-vertical-demo"      @open="handleOpen"      @close="handleClose"      background-color="#545c64"      text-color="#fff"      active-text-color="#ffd04b">