如何修改Vaadin Grid内联边框的颜色与粗细

我明白你想调整Vaadin Grid内部单元格的边框样式——之前用grid.getStyle().set("border","1px solid black")只修改了Grid整体容器的边框，所以没达到你要的“内联边框”效果。下面给你两个实用的方案：

方案一：利用Vaadin主题变量（推荐） #

Vaadin的Lumo主题提供了专门控制Grid边框的CSS变量，直接在Java代码里设置这些变量就能轻松调整内联边框，无需写额外CSS：

// 设置Grid内部单元格的边框颜色和粗细
grid.getStyle()
    .set("--lumo-grid-border-color", "#000000") // 黑色边框
    .set("--lumo-grid-border-width", "1px");    // 1px粗细

这个方法的好处是完全贴合Vaadin的主题系统，不会破坏组件的原生样式结构，而且代码简洁。

方案二：自定义CSS类（适合复杂样式） #

如果需要更精细的控制（比如只修改某列的边框，或者区分表头和内容单元格），可以自定义CSS类：

1. 先在你的样式文件中添加如下CSS：

.custom-grid vaadin-grid-cell,
.custom-grid vaadin-grid-header-cell {
  border: 1px solid #000000;
  /* 可选：调整边框样式，比如虚线、圆角等 */
  /* border-style: dashed; */
}

/* 可选：去掉Grid外层多余边框，避免重复 */
.custom-grid {
  border: none;
}

2. 然后在Java代码中给Grid添加这个自定义类：

grid.addClassName("custom-grid");

为什么之前的方法不生效？ #

grid.getStyle().set("border")只是给Grid组件的最外层容器添加边框，而Grid内部的表头单元格（vaadin-grid-header-cell）和内容单元格（vaadin-grid-cell）都有自己独立的边框样式，这些样式默认由Lumo主题的变量控制，所以直接修改外层边框不会影响内部的内联边框。

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