How do I change the background color of <th> from the default blue? about vaadin-grid

[jouni]

v-grid doesn’t expose any cross scope styling properties yet (e.g. --v-grid-header-background-color).

We’re planning on doing that quite soon, but for now you can just use the following (if you’re not using native Shadow DOM):

<style>
/* 
 Need to use a very specify selector because 
 Polymer style scoping adds a lot of extra classes
*/
.v-grid .v-grid-header th.v-grid-cell {
  background: #f0f0f0;
  color: #222;
}
</style>

In the future, you should be able to use something like this:

<style is="custom-style">
:host {
  --v-grid-header-cell: {
    background: #f0f0f0;
    color: #222;
  }
}
</style>

[rbjarnason]

Thanks 👍

[jouni]

Closing, as this is not an issue, but more a question. Similar questions can also be asked on the Gitter chat: https://gitter.im/vaadin/components

Cross scope styling support is planned for later.