Как изменить цвет границы одной строки в реагирующей таблице

Я знаю, как изменить цвет фона строки в объекте ReactTable (код ниже).

Как изменить цвет границы строки (не границы всей таблицы)? Я попытался заменить background в приведенном ниже коде на border-color, или borderColor, или border, и ни один из этих вариантов не работает - либо я получаю сообщение об ошибке, либо вообще ничего не происходит при компиляции.

getTrProps={(state, rowInfo, column) => {
    if(rowInfo) {
        return {
            style: {
                background: "blue"
            }
        };
    }
    return {}; 
}

reactjs javascript css react-bootstrap react-table
person ABC    schedule 24.09.2019    source источник
comment
Как используется getTrProps? можете ли вы поделиться больше кода?   -  person Ruhul Amin    schedule 24.09.2019

Ответы (2)


arrow_upward
1
arrow_downward

Как это:

getTrProps = (state, rowInfo, instance) => {
    if (rowInfo) {
      return {
        style: {
          border: rowInfo
            ? rowInfo.row.age >= 20
              ? "solid 1px black"
              : "none"
            : "none"
        }
      };
    }
    return {};
  };

Рабочий пример: https://codesandbox.io/s/react-table-gettrprops-ijgzy

person Oleg    schedule 24.09.2019

arrow_upward
0
arrow_downward

Следуйте этому, чтобы изменить цвет отдельной ячейки на основе условия row.value

{
  Header: () => <div className="text-center font-weight-bold">Status</div>,
  accessor: "selectedstatus",
  className: "font",
  width: 140,
  Cell: (row) => (
    <div
      className="text-center h-6"
      style={{ background: row.value === "Selected" ? "green" : "red" }}
    >
      {row.value}
    </div>
  ),
},
person Praveen    schedule 16.03.2021