VaadinFlow 中的样式网格

Question

我试图通过 shared-styles 更改我的 Vaadin 流网格 header 的背景颜色。html (webapp/frontend/styles):

<custom-style>   
    <style>

        <dom-module id="my-grid" theme-for="vaadin-grid">
            <template>
                <style>
                    [part~="header-cell"] {
                        background-color: blue;
                    }
                </style>
            </template>
        </dom-module>

    </style>
</custom-style>

对应于 https://github.com/vaadin/vaadin-themable-mixin/wiki/3.-Stylable-Shadow-Parts and https://vaadin.com/components/vaadin-grid/html-api/elements/Vaadin.GridElement 这应该有效 - 但它不...

怎么了？

Answer 1

<dom-module> 不应在 <style> 或 <custom-style> 标签内，而应在其旁边。另外，背景色好像默认会被覆盖，所以你可以试试后面加上!important来测试一下。对我来说，设置 th[part~="header-cell"] 似乎足够具体，不会被覆盖。

<custom-style>
    <style>
    </style>
</custom-style>

<dom-module id="my-grid" theme-for="vaadin-grid">
    <template>
        <style>
            th[part~="header-cell"] {
                background-color: darkorange;
            }
        </style>
    </template>
</dom-module>

VaadinFlow 中的样式网格

Styling Grid in VaadinFlow

java

vaadin

vaadin-grid

vaadin-flow