Vaadin 21 Flow NumberField内部输入框与整体宽度差异化设置问题

你使用的--input-field-width不是Vaadin 21中NumberField组件的内置生效CSS变量，该组件内部输入框的宽度由阴影DOM中part="input-field"的元素属性控制，直接在组件根节点设置未被内部引用的变量不会生效。

正确实现步骤 #

1. 首先在项目的前端资源目录（默认frontend/styles/）新增自定义样式文件，比如vaadin-field-custom.css，写入以下内容：

/* 仅作用于带有fixed-input-width类名的NumberField组件 */
vaadin-number-field.fixed-input-width::part(input-field) {
  max-width: 12rem;
  /* 如果需要完全固定宽度，可替换为width: 12rem，max-width适配小屏场景更友好 */
}

2. 在你的Java UI类（或Spring Boot Vaadin配置类）上添加@CssImport注解导入该样式：

@CssImport(value = "./styles/vaadin-field-custom.css", themeFor = "vaadin-number-field")

3. 在初始化NumberField的代码中添加对应类名即可生效：

NumberField numberField = new NumberField("Label");
numberField.setWidthFull(); // 整个NumberField组件保持满宽
numberField.addClassName("fixed-input-width");
// 其他业务配置

设置完成后，NumberField的标签、帮助文本、校验提示等内容依然会占满全宽，只有内部输入框区域的宽度被限制为12rem，符合需求。

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