vaadin14 - 如何更改 Vaadin-Select 悬停颜色

Question

Current Hover Color
当我们将鼠标移到 vaadin-select 框中的项目上时，我想更改悬停颜色，默认情况下它是浅蓝色的，如屏幕截图 1 所示，但我想更改为其他颜色。怎么做 ？
我已经尝试通过添加

:host(:hover) {
    background-color: #9cbdd6;
}

并导入为

@CssImport(value = "./styles/vaadin-select-items.css", themeFor = "vaadin-item")

Inspecting Vaadin Select
以下答案非常适合上述问题，
但是，当下拉列表关闭时，悬停颜色出现时会出现一个问题，这也意味着未打开叠加层。如何阻止？

我只需要修改覆盖层上的悬停颜色，如下所示，通过上述代码正确发生，但需要停止上述操作。
在叠加项目上悬停颜色

同样应用这样的主题应用于所有覆盖项目，如何为某些组件独特地应用这些样式。

Answer 1

您走在正确的轨道上，但您需要一个强大的选择器。如果您愿意使用 !important ，这将起作用:

:host(:hover:not([disabled]))  {
    background: red !important;
}