我嘗試在Hilla項目中設計網格樣式，但是行的css選擇器不起作用。

簡單的三列網格，有效

<Grid items={ingredients} selectedItems={selectedIngredients}
                  onActiveItemChanged={e =>{
                setSelectedIngredients(e.detail.value? [e.detail.value] : []);
                console.log(selectedIngredients);
            }}>
                <GridColumn path={"id"}></GridColumn>
                <GridColumn path={"name"}></GridColumn>
                <GridColumn path={"val"}></GridColumn>
</Grid>

然后，我添加了一些css樣式的組件。參考vaadin造型文件的Hilla文件。 https://vaadin.com/docs/latest/components/grid/styling

類似選擇器

vaadin-grid::part(row) {
    background-color: green;
}
vaadin-grid::part(selected-row) {
    background-color: green;
}

似乎沒什么效果。但是可以通過以下方式更改所選行的背景色

vaadin-grid::part(selected-row-cell) {
    background-color: yellow;
}

也可以在單元格級別添加懸停效果，但是::part(row)選擇器不起作用。

我做錯了什么？有什么變通方法嗎？

正如Jakub所建議的，在默認主題中，背景顏色是在單個單元格上定義的:https://github.com/vaadin/web-components/blob/ 325917971162 c 7870 E3 ef 1063 a 1519219 aa 7 b 71 b/packages/grid/theme/LUMO/vaa din-grid-styles . js # L42-L47

因此，要更改背景顏色，您需要以單元格為目標:

vaadin-grid::part(cell) {
    background-color: green;
}
vaadin-grid::part(selected-row-cell) {
    background-color: green;
}