How to set a new style for Grid?

Flow
1

Hi.
I need a simply background color for table header and cells.
Default it use, background-image: -webkit-linear-gradient(top, white 2%, #f4f4f4 98%);
How to override this default style?:

Default:
.mytheme .v-grid-header .v-grid-cell {
background-color: #FFFFFF;
background-image: -webkit-linear-gradient(top, white 2%, #f4f4f4 98%); */
background-image: linear-gradient(to bottom,white 2%, #f4f4f4 98%); */
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

Needed:
.v-grid-cell {
background-color: #FFFFFF;
background-image: none;
}

@mixin mytheme {
  @include valo;
   // Insert your own theme rules here
 
//override
.v-grid-header .v-grid-cell {
    background-color: #FFFFFF;
     background-image: none;
    }
}

But, not working(

2

Check answer here
https://vaadin.com/forum/#!/thread/16910945/16912613

3

Thanks for answer, but no working, because:
background-image style set in the child element.

My code:

grid.addColumn(Person::getFirstName).setCaption("Name").setId("NameID");
            HeaderRow header = grid.getHeaderRow(0);
            HeaderCell cell = header.getCell("NameID");
            cell.setStyleName("my_table");

But not working for me(v-grid-cell override my style class)
Result dom structure is(cell):

<th class="v-grid-cell(defult background-image) my_table(my custom style) v-grid-cell-focused sortable" colspan="1" style="height: 38px; width: 1708px;">
<div class="v-grid-column-header-content v-grid-column-default-header-content">Name</div><div class="v-grid-column-resize-handle">      </div>
</th>

And i can’t do this:
cell.removeStyle(“v-grid-cell”), because no this method

4

Hi,

have you tried to add
!important
 to your
my_table
class’s attributes?

Something like this:

.myclass{
background: blue !important;
}

It should do the trick

-Anastasia