如何仅对单个Vaadin CRUD实例自定义Editor弹窗宽度

首先修改你自定义的CSS文件（gridCrudEditor.css）的选择器规则，新增自定义主题标识限制作用范围：

:host([theme~="layout"][theme~="custom-wide-crud"]) [part="overlay"] {
    min-width: 100%;
}

原有的@CssImport配置不需要改动，保持现有配置即可。

接下来在Java代码中，仅给需要生效的单个CRUD实例的编辑器弹窗添加自定义主题名：

// 你的CRUD实例初始化代码
GridCrud<你的实体类> crud = new GridCrud<>(你的实体类.class);
// 给当前CRUD的编辑器弹窗添加自定义主题标识
crud.getEditor().addThemeName("custom-wide-crud");

如果使用的Vaadin版本不支持addThemeName方法，可替换为以下写法：

crud.getEditor().getElement().getThemeList().add("custom-wide-crud");

实现原理 #

• 新增的CSS选择器仅会匹配同时带有layout和custom-wide-crud两个theme属性值的vaadin-dialog-overlay组件，只有你主动添加了自定义主题名的CRUD弹窗才会命中该规则，不会影响其他CRUD实例
• 该选择器权重高于Vaadin默认的规则，会覆盖默认的min-width:20em配置，实现你要的100%宽度效果

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