Vaadin中Button与MenuBar同宽设置却显示不一致的解决咨询

问题原因 #

Vaadin的Button和MenuBar组件在Lumo主题下，默认的**内边距（padding）和边框（border）**样式存在差异，且组件默认采用content-box的盒模型——你设置的width仅代表内容区域的宽度，加上不同的内边距、边框后，最终整体显示宽度就会出现偏差。

解决方法 #

方法1：统一盒模型为border-box #

通过CSS将两个组件的盒模型设置为border-box，这样你设置的width会包含内边距和边框，确保整体宽度一致。

在项目的frontend/styles.css文件中添加以下样式：

vaadin-button, vaadin-menu-bar {
  box-sizing: border-box;
}

方法2：手动统一内边距 #

如果不想修改盒模型，可以手动调整MenuBar的内边距，使其与Button的默认内边距匹配。

在Java代码中给MenuBar添加内联样式：

menuBar.getStyle().set("padding", "var(--lumo-space-xs) var(--lumo-space-m)");

或者在CSS中统一设置：

vaadin-menu-bar {
  padding: var(--lumo-space-xs) var(--lumo-space-m);
}

方法3：通过主题变量统一样式 #

利用Vaadin的Lumo主题自定义变量，统一两个组件的尺寸相关属性：

vaadin-menu-bar {
  --lumo-button-padding-horizontal: var(--lumo-space-m);
  --lumo-button-padding-vertical: var(--lumo-space-xs);
}

验证效果 #

添加上述任意一种样式后，重新启动项目，Button和MenuBar的显示宽度就会保持一致。

内容的提问来源于stack exchange，提问作者Алексей Жуков