Devextreme-reactive: How to change table border styles

[madebymt]

• React Grid
  I checked the doc see how to style or create a custom theme for table, but currently, have really hard time to change table row border color
  Demo code:
  https://codesandbox.io/s/devextreme-react-grid-for-material-ui-tnzd2?fontsize=14
  I tried the code below, it changed the background, but not the border color.

const TableRowStyle = ({ row, ...restProps }) => (
  <Table.Row
    {...restProps}
    style={{
      cursor: "pointer",
      color: "#ABC3CF",
      height: 60,
      border: "1px solid black"
    }}
  />
);

  <Table
              cellComponent={this.tableCellStyle}
              columnExtensions={tableColumnExtensions}
              rowComponent={TableRowStyle}
            />

Thanks for the help!

[drilus]

const styles = theme => ({
  tableBorder: {
    border: "1px solid black",
    color: "#ABC3CF",
  },
});

const TableComponentBase = ({ classes, ...restProps }) => (
  <Table.Table
    {...restProps}
    className={classes.tableBorder}
  />
);

export const TableHeaderComponent = withStyles(styles, { name: 'TableHeaderComponent' })(TableHeaderComponentBase);

<Table tableComponent={TableComponent} />

Try this. It worked for me.

[madebymt]

@drilus
Thank you so much! it works!

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.