Vaadin框架下TextField颜色修改无效问题求助

问题出在Shadow DOM的样式穿透方式和选择器使用错误上，以下是具体解决步骤：

1. 修正CSS选择器 #

Vaadin的Web Component基于Shadow DOM实现，要定位组件内部暴露的input-field部分，必须使用::part()伪元素，而非普通的属性选择器[part='input-field']。修正后的CSS代码：

.custom-text-field::part(input-field) {
    flex-grow: 0;
    background-color: orange;
}

如果默认样式优先级不足，可添加组件标签前缀提升优先级：

vaadin-text-field.custom-text-field::part(input-field) {
    flex-grow: 0;
    background-color: orange;
}

2. 确保CSS文件正确导入 #

Vaadin项目中自定义样式需正确加载，推荐两种方式：

• 注解关联导入：在视图类上添加@CssImport注解，指定样式文件路径并关联到vaadin-text-field组件：

  @CssImport(value = "./styles/custom-text-field.css", themeFor = "vaadin-text-field")
  public class YourView extends VerticalLayout {
      public YourView() {
          TextField textField = new TextField();
          textField.addClassName("custom-text-field");
          add(textField);
      }
  }
  

• 全局样式导入：将自定义CSS文件放在frontend/styles/目录下，然后在frontend/styles/styles.css中导入：

  @import "./custom-text-field.css";
  

3. 验证生效状态 #

修改后刷新页面，打开浏览器开发者工具检查：

• 确认vaadin-text-field元素已添加custom-text-field类
• 查看::part(input-field)对应的样式是否被正确应用（无划掉的失效标记）

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