如何修改Vaadin 14.6.3中默认的蓝色悬停与边框效果？

方法一：通过Lumo主题变量全局替换（推荐） #

在styles.css中修改Lumo的主色调变量，所有依赖主色调的组件（包括上下文菜单）都会同步变更，保持主题一致性：

/* styles.css */
:root {
  --lumo-primary-color: #你的目标绿色值; /* 示例：#2e7d32 */
  --lumo-primary-color-50pct: rgba(46, 125, 50, 0.5);
  --lumo-primary-color-10pct: rgba(46, 125, 50, 0.1);
}

方法二：单独针对上下文菜单组件覆盖样式 #

如果只想修改上下文菜单的样式，不影响其他组件，在styles.css中添加以下选择器：

/* 上下文菜单项悬停背景色 */
vaadin-context-menu-item:hover {
  background-color: #你的绿色悬停值;
}

/* 上下文菜单项选中时的边框色 */
vaadin-context-menu-item[focused] {
  box-shadow: 0 0 0 2px #你的绿色边框值;
}

注意事项 #

• 确保styles.css放置在frontend/styles/目录下，Vaadin会自动识别并加载该文件
• 若使用shared-styles.js，也可通过其中的样式注入逻辑添加上述代码，但直接修改styles.css更直观

内容的提问来源于stack exchange，提问作者Daniel Klemm