设置标题背景 Vaadin 14 网格答案

【问题标题】：Set header background Vaadin 14 grid设置标题背景 Vaadin 14 网格
【发布时间】：2021-06-21 07:01:49
【问题描述】：

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

这是我目前的代码：

grid = new Grid<Room>();

我可能需要做一些事情

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

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

那么，有人知道，如何在 Vaadin 14 中设置网格标题的背景颜色？

感谢您的帮助！托尔斯滕

【问题讨论】：

【解决方案1】：

如果您想为所有网格设置标题背景，您可以在 grid-header.css 中添加：

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

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

grid.addClassName("background-example");

并使用这个 CSS：

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

【讨论】：

【解决方案2】：

您的设置看起来正确。剩下的是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

【讨论】：

该解决方案完美运行！非常感谢你。但只是一个额外的问题：我将 css 设置为 [part~="header-cell"] { background-color: black;红色; } 所以，前景色是红色，背景是黑色。但是，当用户单击它进行排序时，如何设置标题处于活动状态的颜色？现在激活时的颜色是蓝色的，我该如何更改它？