CODEWITHSUNDEEP
javavaadinvaadin-gridvaadin-flow
olivmir
olivmir

Reputation: 722

Styling Grid in VaadinFlow

I've tried to change the background colour of my Vaadin Flow Grid's header via shared-styles.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>

Corresponding to https://github.com/vaadin/vaadin-themable-mixin/wiki/3.-Stylable-Shadow-Parts and https://vaadin.com/components/vaadin-grid/html-api/elements/Vaadin.GridElement this should work - but it doesn't ...

What is wrong?

Upvotes: 1

Views: 561

Answers (1)

Erik Lumme
Erik Lumme

Reputation: 5342

The <dom-module> should not be inside the <style> or <custom-style> tag, but beside it. In addition, it seems the background color will be overridden by the default, so you can try adding !important afterwards for testing. For me setting th[part~="header-cell"] seems specific enough to not get overridden.

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

Upvotes: 3

Related Questions