如何调整FormLayout内两个元素的margin为var(--lumo-space-s)

解决方案 #

Vaadin FormLayout 内置了专门的CSS变量用于控制元素间距，你完全可以通过getStyle().set()方法直接修改，无需额外定义样式类：

// 调整垂直方向（行与行）表单项的间距
formLayout.getStyle().set("--vaadin-form-layout-row-spacing", "var(--lumo-space-s)");

// 若需要调整同一行内水平方向的列间距，使用下面的变量即可
// formLayout.getStyle().set("--vaadin-form-layout-column-spacing", "var(--lumo-space-s)");

• --vaadin-form-layout-row-spacing 控制的就是不同行表单项之间的垂直间距，和你参考图中需要修改的间距对应，设置后会直接生效在当前FormLayout实例上，不会影响其他组件的样式。
• 直接调用该方法修改的优先级高于默认主题样式，无需担心样式覆盖问题。

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