Vaadin 23中如何将DateTimePicker设置为列布局？

问题原因 #

Vaadin 组件的 Shadow DOM 存在样式隔离机制，全局样式文件中的普通选择器无法穿透到组件内部的 Shadow DOM 元素。你之前的 CSS 写在全局样式文件中，无法访问到 DateTimePicker 内部的 .slots 容器，所以样式不生效。

解决方案 #

需要通过 Vaadin 提供的主题样式注入机制，将 CSS 定向注入到 DateTimePicker 的 Shadow DOM 中，具体步骤如下：

1. 创建组件专属样式文件 #

在你的主题目录下创建组件样式文件：frontend/themes/common-theme/components/vaadin-date-time-picker.css，写入以下内容：

:host(.stacked) .slots {
    display: flex;
    flex-direction: column;
    /* 可选：添加日期和时间选择器之间的间距，使用Lumo主题变量保持风格统一 */
    gap: var(--lumo-space-m);
}

2. 关联样式与组件 #

在你的 UI 类或主布局类中，使用 @CssImport 注解将样式文件与 vaadin-date-time-picker 组件关联，确保样式注入到其 Shadow DOM 中：

@CssImport(
    value = "./themes/common-theme/components/vaadin-date-time-picker.css",
    themeFor = "vaadin-date-time-picker"
)
public class MainLayout extends AppLayout {
    // 你的布局逻辑代码
}

3. 保持原 Java 代码不变 #

你之前的 Java 代码无需修改，继续为 DateTimePicker 添加 stacked 类即可：

DateTimePicker dateTimePicker = new DateTimePicker();
dateTimePicker.addClassName("stacked");
add(dateTimePicker);

原理说明 #

• themeFor = "vaadin-date-time-picker" 是核心：它告诉 Vaadin 将该样式文件的内容注入到 vaadin-date-time-picker 组件的 Shadow DOM 内部，打破样式隔离限制。
• 此时样式中的 :host 指代的就是 vaadin-date-time-picker 元素，:host(.stacked) 会精准匹配带有 stacked 类的 DateTimePicker 实例，进而选中其内部的 .slots 容器应用列布局样式。

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