Vuetify v 菜单颜色

Question

我正在尝试更改 v 菜单下拉背景的颜色。现在它只是白色，然后在黑暗模式下它是深灰色。

我已经尝试使用以下方法覆盖CSS：

.v-menu__content  { background-color: var(--v-success-base) !important; }

但是无论我怎么尝试，这都不起作用。我还在 v 菜单中使用：

content-class

，但这也不起作用。

这是否可能，我是否应该使用与打开此 v 菜单的应用程序栏按钮不同的解决方案？

Answer 1

您可以使用

v-list 和 CSS 变量 v-menu

（由 

:content-props

 的 SaaS 变量

在内部使用）来设置 --v-theme-surface

 中底层 

v-list 的样式。

首先定义一个CSS规则来改变背景颜色变量：

.success-content {
  --v-theme-surface: 25, 135, 84;
}

小心❗️颜色CSS变量大多数时候只接受数字而不直接接受颜色；虽然前面的 CSS 规则有效，但以下规则无效：

.success-content { /* Will not work! */
  --v-theme-surface: rgb(25, 135, 84);
}

创建 CSS 规则后，您可以将其应用到您的

v-menu

:

<v-menu
  ...
  :menu-props="{
    contentClass: 'success-content',
  }"
>

这里是 VPlay 上的演示。

---

您还可以使用自定义主题来概括这些样式并在代码中的其他位置重用它们，还可以使用附加或分离样式。有关更多详细信息，您可以查看使用 Vuetify 对类似样式问题的回答

祝您项目顺利！