如何修改Vaadin multi-select-combo-box组件的切换按钮颜色？

问题重现 #

使用Vaadin的vaadin-multi-select-combo-box组件时，尝试通过以下CSS修改切换按钮颜色但未生效：

static styles = css`
  :host::part(toggle-button)::before {
    color: yellow;
  }
`;

组件代码：

<vaadin-multi-select-combo-box
  required
  placeholder="Select countries to visit"
  item-label-path="name"
  item-id-path="code"
  .items="${this.items}"
>
  <div slot="error-message">Please select at least one country</div>
</vaadin-multi-select-combo-box>

解决方案 #

Vaadin的Multi-Select Combo Box切换按钮的图标并非通过::before伪元素实现，而是使用内置的vaadin-icon组件，因此需要调整CSS选择器和样式属性：

• 方法1：使用组件内置CSS变量
  利用Vaadin暴露的自定义属性直接控制图标颜色：

  static styles = css`
    :host::part(toggle-button) {
      --vaadin-icon-color: yellow;
    }
  `;
  

• 方法2：直接选中图标元素
  如果变量方式无效，可直接定位到按钮内的图标组件：

  static styles = css`
    :host::part(toggle-button) vaadin-icon {
      color: yellow;
    }
  `;
  

• 方法3：提升样式优先级（用于解决冲突）
  若存在默认样式覆盖，可临时添加!important（不推荐过度使用）：

  static styles = css`
    :host::part(toggle-button) {
      --vaadin-icon-color: yellow !important;
    }
  `;
  

原因说明 #

原代码中使用::before伪元素是错误的——Vaadin切换按钮的下拉图标是通过独立的vaadin-icon组件渲染的，并非伪元素。正确的做法是通过组件暴露的CSS变量或直接选中图标元素来修改颜色。

内容的提问来源于stack exchange，提问作者Newsha Nik