首页 > 解决方案 > VaadinFlow 中的样式网格

问题描述

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

<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-Partshttps://vaadin.com/components/vaadin-grid/html-api/elements/Vaadin .GridElement这应该可以工作 - 但它没有......

怎么了?

标签: javavaadinvaadin-gridvaadin-flow

解决方案


<dom-module>不应该在or<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>

推荐阅读