如何修改Vaadin 14 Dialog组件的背景色

Vaadin 14 的Dialog组件默认将半透明遮罩层、弹窗容器都封装在Shadow DOM内部，常规全局CSS无法直接命中id为overlay的根节点，可通过以下两种方式实现修改：

方法1：Java端直接注入样式（无需新增CSS文件） #

在Dialog初始化代码中添加以下配置，直接为Dialog的overlay节点设置背景色：

Dialog dialog = new Dialog();
// 为Dialog添加自定义主题属性（可选，用于区分不同Dialog）
dialog.getElement().getThemeList().add("custom-blue-overlay");
// 直接修改overlay节点的style属性
dialog.getElement().executeJs("this.$.overlay.style.background = '#3b85e6'");

该方法适合临时修改单个Dialog的背景色，无需额外配置样式文件。

方法2：全局定义共享样式（适合多个Dialog复用） #

在项目的前端样式目录（通常是frontend/styles/）新增自定义样式模块，或直接在已有全局样式文件中添加配置：

1. 新增样式模块文件custom-dialog-styles.css，内容如下：

/* 所有Dialog统一生效 */
[part~="overlay"] {
  background: #3b85e6 !important;
}

/* 如果仅需要指定Dialog生效，用以下带theme属性的选择器替换上面的即可
:host([theme~="custom-blue-overlay"]) [part~="overlay"] {
  background: #3b85e6 !important;
}
*/

2. 在Java代码中使用@CssImport注解引入该样式，并指定作用于Dialog组件：

@CssImport(value = "./styles/custom-dialog-styles.css", themeFor = "vaadin-dialog-overlay")
public class YourView extends VerticalLayout {
    // 视图业务代码
}

注意事项 #

• 不要直接在全局CSS中写#overlay选择器，该id处于Shadow DOM内部，全局选择器无法命中
• 若需同步修改弹窗内容区域的背景，可在样式中新增[part~="content"]节点的对应配置

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