设置 header 背景 Vaadin 14 网格

Question

我正在尝试为 Vaadin 14 网格中的 header 设置背景颜色。但我真的不知道它是如何工作的。

到目前为止，这是我的代码：

grid = new Grid<Room>();

我可能需要做一些事情

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

并访问 grid-header.css 中的一些 Shadow DOM 元素，但我就是不知道它是如何工作的。

所以，有人知道，如何在 Vaadin 14 中设置网格 header 的背景颜色吗？

感谢您的帮助！索斯腾

Answer 1

您的设置看起来是正确的。剩下的就是CSS。试试这个：

[part~="header-cell"] {
  background-color: var(--lumo-primary-color);
  color: var(--lumo-primary-contrast-color);
}

你当然可以使用任何你喜欢的颜色。

如果您还没有找到它，这里有更多关于如何设置组件内部样式的文档：https://vaadin.com/docs/latest/ds/customization/styling-components

Answer 2

如果您想为所有网格设置 header 背景，您可以将其添加到 grid-header。css:

[part~="header-cell"] {
    background-color: pink;
}

如果你想要一个特定的背景，你可以在你的网格中添加一个类名：

grid.addClassName("background-example");

并使用这个 CSS:

:host(.background-example) [part~="header-cell"] {
    background-color: green;
}

Set header background Vaadin 14 grid