Vaadin：如何設置特定網格的樣式？

Question

我有一個帶有網格的視圖，我有一個網格單元格的樣式：

[part~="cell"] ::slotted(vaadin-grid-cell-content) {
    padding: var(--lumo-space-xl);
}

如果我通過@CssImport應用這種樣式

@CssImport(value = "./styles/example.css", themeFor = "vaadin-grid")

它有效，但這將適用於所有 Vaadin 網格，這不是我想要的。 如果我不指定themeFor這將不適用。

我只想將此樣式應用於定義網格的視圖中的網格。

我嘗試使用如下主題：

:host([theme~="custom-grid-theme"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) {
    padding: var(--lumo-space-xl);
}

然后在網格上

grid.addThemeName("custom-grid-theme");

但它不起作用。

我也試過：

grid.getElement().setAttribute("theme", "custom-grid-theme");

這也不起作用，它會刪除我應用的任何 GridVariant。

我正在使用 Vaadin 14。

謝謝您的幫助。

Answer 1

CSS 看起來正確並且addThemeName()似乎也被正確使用，所以我希望它能工作。

你可以嘗試幾件事：

1. 使用瀏覽器開發工具中的 DOM 檢查器檢查主題屬性是否應用於正確的vaadin-grid元素。

2. 整個解決方案可以稍微簡化，因為vaadin-grid-cell-content不在網格的影子 DOM 中。 試試這個：

grid.addClassName("custom-grid-theme");

在您的全局樣式表中（未使用themeFor導入）：

vaadin-grid.custom-grid-theme vaadin-grid-cell-content {
  padding: var(--lumo-space-xl);
}