AntTable React - невозможно установить границу строки через rowClassName - PullRequest
Новая
       90

AntTable React - невозможно установить границу строки через rowClassName

0 голосов
/ 12 июля 2020

Мне нужно отобразить некоторые строки с границами, а не все строки. Я могу установить высоту, цвет фона или некоторые другие свойства стиля строк через свойство rowClassName, но я не могу ничего определить о границах. Ничего не работает с бордюром. 

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}
    />
  );

1 Ответ

1 голос
/ 12 июля 2020

Попробуйте добавить ниже css в свой код 

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

Вам нужно определить border-width и border-style вместе с border-color. 

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

Демо

...