bwu_datagrid, how to override row background colors and add a row :hover color

Issue

I’m trying to override the odd/even colors and give the row a “:hover” background color, but I cannot override:

undefined .bwu-datagrid-row.odd, 
.bwu-datagrid-row.odd:not([style-scope]):not(.style-scope) {
    background: #fafafa;
}

Here is what I’ve tried on my Theme html with no results :

:host::content .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd {
      /* !important works, but it prevents me from doing a :hover */
      background-color: lightskyblue;
      background: lightskyblue;
}

Adding “:hover” to this last rule doesn’t get trigger when the row is moused over. I’m hoping that this is possible, so when someone hovers on any cell in a row, the entire row changes background color.

Solution

in package:bwu_datagrid/datagrid/bwu_datagrid_default_them.* is the default theme style module. It is supposed to be used as a template for your own theme.

Create a style module with the same name (<dom-module id='bwu-datagrid-default-theme'>, copy what you want/need from the shipped default theme to your custom theme.
Then only import your custom theme instead of the one from package:bwu_datagrid/datagrid/ and only the styles from your style module will be applied.
This way you don’t have to “fight” the default theme.

Answered By – Günter Zöchbauer

Answer Checked By – Cary Denson (FlutterFixes Admin)