Vaadin 24中网格第一列单元格内边距样式不生效，如何解决？

在Vaadin 24版本中，你之前使用的::part(first-column-cell)选择器已不再适用，需要结合组件内部的part结构和CSS伪类来精准选中目标单元格。以下是两种可行的解决方案：

方案一：全局所有Grid生效 #

直接针对所有vaadin-grid组件的第一列数据单元格设置样式，CSS代码如下：

vaadin-grid ::part(body-row) ::part(cell):first-of-type {
  padding-left: 0;
  /* 可根据需求添加其他内边距属性，比如padding-right、padding-top等 */
}

这里::part(body-row)确保只选中数据行的单元格，不会影响表头单元格；:first-of-type则精准定位每行的第一个单元格。

方案二：仅指定组件内的Grid生效 #

如果只需要当前MyComponent内的Grid生效，可以给Grid添加自定义类名，比如在组件初始化时：

Grid<YourDataType> grid = new Grid<>();
grid.addClassName("custom-first-column-grid");
// 后续列配置代码

然后在vaadin-grid.css中使用类名限定选择器：

.custom-first-column-grid ::part(body-row) ::part(cell):first-of-type {
  padding-left: 0;
}

原有代码失效的原因 #

Vaadin 24对Grid的内部DOM结构和part名称做了调整，first-column-cell这个旧part已被移除，因此之前的选择器无法匹配到目标元素。新的选择器通过嵌套::part(body-row)和::part(cell)，再结合:first-of-type伪类，能准确命中第一列的单元格，同时保证样式优先级足够覆盖默认样式。

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