AntTable React - can't set row border through rowClassName

Question

I need to render some rows with borders, not all rows. I can set height, background color or some other style properties of rows through rowClassName property, but I can't define anything about borders. Nothing about border works.

export default makeStyles(theme => ({
  lastBatched: {
    borderBottom: '#F3D0CF',
  },
  firstBatced: {
    height: '100px',
    borderWidth: '20px',
    borderBottom: '#F3D0CF',
    borderColor: '#5d3ebc',
    backgroundColor: 'red',
  },
}));

---

  const getRowClassName = (record, index) => {
    const classes = useStyles();

    if (record.batchInfos.isFirstIndex) {
      return `${FIRST_ROW_CLASS_NAME} ${classes.firstBatced}`;
    }


    if (record.batchInfos.isLastIndex) {
      return `${FIRST_ROW_CLASS_NAME} ${classes.lastBatched}`;
    }

    return null;
  }

  return (
    <AntTable
      rowClassName={getRowClassName}
      data={activeOrders}
      columns={columns}
      loading={isPending && showLoadingSpinner}
      pagination={pagination}
      onPaginationChange={handlePaginationChange}
    />
  );

Answer 1

Try adding below css in your code

.ant-table table {
  border-collapse: collapse;
}

You need to defined border-width and border-style along with border-color.

.isLast {
  border-bottom: 40px;
  border-width: 7px;
  border-color: #5d3ebc;
  border-style: solid;
  height: 100px;
}

Demo