vaadin - 样式选择元素的弹出窗口

Question

我正在尝试设置“选择”元素的弹出窗口（当您选择一个项目时打开的窗口）的样式。

我可以通过以下 css 正确定位弹出窗口：

vaadin-select-item { 
    background: black;
    color: white;
}

问题是，这会全局设置弹出窗口，因为我只想将此样式应用于此特定元素。

我设置了以下类名：

var droplist = new Select<SearchType>();
        droplist.addClassName("search-bar");
        droplist.setOverlayClassName("search-bar_popup");

我可以通过以下方式定位主下拉列表：

vaadin-select.search-bar::part(toggle-button) {
    color: white;
}

vaadin 的样式文档相当有限：<

但是当我尝试定位弹出窗口时，CSS 无法定位该元素：

vaadin-select-item.search-bar_popup { 
    background: black;
    color: white;
}

Answer 1

覆盖层类名应用于覆盖层元素，而不是覆盖层中的各个项目。这些项目是覆盖层的常规子元素，因此使用覆盖层类名

search-bar

，您可以像这样定位它们：

/* style the overall select element */
.search-bar vaadin-select  {
    height: 58px;
    width: 120px;
    align-content: center;
    flex-wrap: wrap;
}


/* search type drop list */
.search-bar vaadin-select-item  { 
    background: black;
    color: white;
}

/* style the drop arrow */
.search-bar vaadin-select::part(toggle-button) {
    color: white;
}

/* style the popup window */
.search-bar_popup vaadin-select-item {
    background: black;
    color: white;
}