Vaadin Flow 23自定义按钮样式误作用于菜单按钮的问题咨询

问题背景 #

使用Vaadin Flow 23，想要为<Button>（对应前端<vaadin-button>元素）添加自定义基础样式：

1. 在/frontend/component-styles/button.css中编写样式：

:host {
    border: 1px solid #AEB136;
}

2. 在Java类中通过注解引入样式：

@CssImport(value = "./component-styles/button.css", themeFor = "vaadin-button")

遇到的问题：上述样式不仅会应用到<vaadin-button>元素，还会作用于<vaadin-menu-bar>内部的<vaadin-menu-bar-button>元素。但如果给样式指定特定主题变体（如:host([theme~="primary"])）或状态（如:host(:hover)、:host([active])），就不会出现这个问题。

更新：发现使用:host(vaadin-button)可以实现仅作用于<vaadin-button>，但疑惑themeFor = "vaadin-button"应该已经限定了样式范围，为什么还会影响其他组件？

原因分析 #

Vaadin的组件样式系统中，<vaadin-menu-bar-button>继承了<vaadin-button>的样式模块。当使用themeFor = "vaadin-button"时，样式会被注入到所有继承该样式模块的组件中，而不仅仅是<vaadin-button>标签本身。基础的:host选择器没有额外限定，会被所有继承该样式模块的宿主元素匹配到。

解决方案 #

方案1：使用标签限定的:host选择器 #

直接在样式中明确指定宿主元素标签，确保样式只作用于<vaadin-button>：

:host(vaadin-button) {
    border: 1px solid #AEB136;
}

方案2：使用自定义主题变体 #

1. 给需要应用样式的<Button>添加自定义主题变体：

Button button = new Button("自定义按钮");
button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

2. 在样式文件中针对该变体编写样式：

:host([theme~="primary"]) {
    border: 1px solid #AEB136;
}

这种方式更灵活，只有添加了指定变体的按钮才会应用样式，完全避免影响其他组件。

内容的提问来源于stack exchange，提问作者Herman Bovens