CSS is overriden by something (row class)

[riksnelders]

Trying to add a row class based on a row value.

Using /deep/ .ve-table .ve-table-body-tr:has(.active)

works, is applied (shows in dev tools) But does not render the table row with given color.

Did I miss something in the docs?

 <ve-table
        ref="tableRef"
        :max-height="600"
        :height="200"
        :fixed-header="true"
        :expand-option="expandOption"
        row-key-field-name="sequence"
        :virtual-scroll-option="virtualScrollOption"
        :columns="getColumns"
        :row-class-name="getRowClass"
        :sort-option="sortOption"
        :scroll-width="'80vw'"
        :cellSelectionOption="cellSelectionOption"
        :cell-style-option="cellStyleOption"
        :border-y="true"
        :row-style-option="rowStyleOption"
        :table-data="products"/>
  </div>

 virtualScrollOption: {
        enable: false,
      },
      rowStyleOption: {
        stripe: true,
        clickHighlight: true,
        hoverHighlight: true,
      },
      cellSelectionOption: {
        enable: false,
      },
      cellStyleOption: {
        bodyCell: ({ row }) => ({
          backgroundColor: row.isrunning ? 'lightblue' : ''
        })
      },
      expandOption: {
        trigger: "cell",
        expandable: ({row, column, rowIndex}) => {
          return !this.fullscreen
          // if (row["comment"].length > 0) {
          //   return true;
          // }
          // return false
        },
        render: ({row, column, rowIndex}, h) => {
          return <SubProductTable columnWidth={this.columnWidths} index={rowIndex} row={row}/>;
        },
      },