Vaadin14.7.3版本Button组件自定义headliner类CSS样式不生效问题

问题原因 #

Vaadin 14 内置的Button组件属于Web Component组件，内部DOM封装在Shadow DOM中，全局CSS默认无法穿透Shadow DOM作用到组件内部元素：

• 你测试生效的.headline是Vaadin默认Lumo主题内置的排版样式类，组件内部已经做了对应适配，因此设置后可以直接生效
• 自定义的.headliner属于你自己新增的样式类，没有适配组件的Shadow DOM结构，因此无法生效，包括background-color等修改内部元素属性的样式也会失效

修复方案 #

方案1：指定CSS文件作用的组件类型 #

修改@CssImport注解，增加themeFor参数指定该样式文件作用于vaadin-button组件，样式会自动注入到按钮的Shadow DOM内部：

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

修改后你现有mainstyle.css里的.headliner样式即可正常生效，也可以正常添加background-color等其他样式。

方案2：使用::part伪元素从全局样式命中按钮 #

不需要修改@CssImport注解，直接修改mainstyle.css里的样式写法，通过Vaadin Button公开的button样式part命中内部元素：

.headliner::part(button) {
  font-weight: bold;
  background-color: #自定义颜色;
}

样式设置参考 #

Vaadin官方提供了完整的组件样式速查资源，覆盖所有组件支持的公开style part、可全局覆盖的CSS变量、内置样式类等内容，适配Vaadin 14版本的相关规则可以直接参考官方文档的主题与样式章节。

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