如何改变element-plus中的el-menu-item标签下内容的背景色和鼠标悬浮在上的背景色

可以使用element-plus提供的CSS变量来修改el-menu-item标签下内容的背景色和鼠标悬浮在上的背景色。

修改el-menu-item标签下内容的背景色：

可以使用--color属性来修改el-menu-item标签下内容的背景色，例如：

.el-menu-item {
  --color: #f0f0f0;
}

修改鼠标悬浮在上的背景色：

可以使用--hover-color属性来修改鼠标悬浮在上的背景色，例如：

.el-menu-item {
  --hover-color: #e6e6e6;
}

完整代码如下：

<template>
  <el-menu default-active="1">
    <el-menu-item index="1">
      <template #title>
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <span>内容一</span>
    </el-menu-item>
    <el-menu-item index="2">
      <template #title>
        <i class="el-icon-menu"></i>
        <span>导航二</span>
      </template>
      <span>内容二</span>
    </el-menu-item>
  </el-menu>
</template>

<style>
.el-menu-item {
  --color: #f0f0f0; /* 修改el-menu-item标签下内容的背景色 */
  --hover-color: #e6e6e6; /* 修改鼠标悬浮在上的背景色 */
}
</style>
``