Apply existing styles (SCSS) to vaadin-grid / vaadin-grid-sorter / vaadin-g

Flow
1

Hey guys,
we are currently trying to integrate vaadin-grid in our angular application.
The integration is almost finished and was quite easy but the styling seems to be a bit more difficult.
The problem is that we already have company styles in scss which we need to apply (e.g. font settings, colors etc.).

Applying scss to vaadin-grid is no problem but for vaadin-grid-sorter / vaadin-grid-sort-column the shadow dom is refusing everything.
If i manually apply some classes in the DOM it will work but i really want to avoid this ugly solution.

Any recommendations?

Thank you in advance!

2

Hi Mark,

Unfortunately I don’t think that’s possible without using a DOM module.

This the default theme implementation:
https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html.

So, something along the lines of:

my-grid-styles.html

<dom-module id="my-grid" theme-for="vaadin-grid">
 <template>
  <style>
   :host {
    font-family: ...