如何在vaadin-grid中sytle Header

Question

grid.addComponentColumn(...)
.setHeader("My column")
.setClassNameGenerator(line -> "first-group-col")

通过JSIMPort包含DOM模块：

import '@polymer/polymer/lib/elements/custom-style.js';
const documentContainer = document.createElement('template');

documentContainer.innerHTML = `
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
    <template>
        <style>
            .first-group-col {
                border-left: 1px solid red;
            }
         </style>
    </template>
</dom-module>`;

document.head.appendChild(documentContainer.content);

但是类'.first-group-col'没有出现在标题行上，我不知道如何在标题单元格上添加类。

那么如何在标题行中的某个列上添加边框呢？

Answer 1

我在第一列使用类名生成器

类名生成器应用于主体单元格，但不应用于标题单元格。

您可以通过使用以下内容来设置header的样式，假设您有Grid，使用Grid.addClassName（“my-grid”）；

        :host(.my-grid) [part="row"] [part~="header-cell"]{
            padding-left: 3px;
            color:brown;
            background:var(--lumo-primary-color);
            align-items:flex-start;
        }

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