java - VaadinFlow 中的样式网格

Question

我尝试通过 shared-styles.html (webapp/frontend/styles) 更改我的 Vaadin Flow Grid header 的背景颜色:

<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和 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>