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

Question

当前悬停颜色

当我们将鼠标移到 vaadin-select 框中的项目上时，我想更改悬停颜色，默认情况下，它以浅蓝色显示，如屏幕截图 1 所示，但我想更改为其他颜色。怎么做 ？

我试过添加

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

并导入为

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

检查 Vaadin Select

下面的答案完美地解决了上述问题，
但是当下拉菜单关闭时，出现悬停颜色的问题也意味着未打开覆盖。如何阻止它？

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

将颜色悬停在叠加项目上

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

标签： vaadin14

Answer 1

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

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