如何在 vaadin 中设置网格单元格样式

我创建了一个带有一列的简单网格：

public MyGrid() {
    addComponentColumn(this::getIcon).setClassNameGenerator(i -> "icon-img");
    setItems(/** some items */);
    setClassName("sidebar-grid");
}

我有一个名为的 css 主题mangaTheme。我这样用@Theme("mangaTheme")。在 mangaTheme 文件夹中我有styles.css文件包含以下内容：

.icon-img {
    padding: 0;
}

.sidebar-grid {
    width: 102px;
    margin: auto;
    margin-left: -30%;
}

The sidebar-grid css properties are applied properly as the grid is moved, but the icon-img properties are not applied whatsoever:

The classnames are applied:

我做错了什么或错过了什么？我还阅读了本指南：https://cookbook.vaadin.com/dynamic-grid-cell-styling https://cookbook.vaadin.com/dynamic-grid-cell-styling

EDIT: After configuring my workspace as was mentioned in the answer this is the resulting structure, but it still does not seem to function properly.

你缺少的是细胞<td>元素位于 Shadow DOM 内部vaadin-grid组件，因此不能使用全局 CSS 进行样式设置。要为组件影子 DOM 内的部分组件设置样式，您需要将 CSS 注入到组件中。

在 Cookbook 示例中，这是通过themeFor加载样式表的注释中的参数：

@CssImport(themeFor = "vaadin-grid", value = "./recipe/dynamicgridcellstyling/dynamic-grid-cell-styling.css")

但是，在主题文件夹中，您可以通过将该 CSS 放入名为 vaadin-grid.css 的样式表中来执行相同的操作components子文件夹，即：

themes/mangaTheme/components/vaadin-grid.css

您缺少的另一件事是类名应用于<td>单元格，但填充位于vaadin-grid-cell-content元素插入单元格，而不是单元格本身，因此您需要重写选择器：

.icon-img ::slotted(vaadin-grid-cell-content) {
    padding: 0;
}

（sidebar-grid CSS 类按原样工作正常，因为它应用于 vaadin-grid 根元素，该元素位于页面的常规 DOM 中。）