如何在react-table中更改单行的边框颜色

Question

我知道如何更改 ReactTable 对象（下面的代码）中一行的背景颜色。

如何更改行的边框的颜色（而不是整个 table 的边框）？我尝试将下面代码中的 background 替换为 border-color、borderColor 或 border，并且这些选项中的 none 有效——要么，我得到一个编译时出错或什么都没有。

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

Answer 1

像这样：

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

Answer 2

按照此操作根据 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>
  ),
},

如何在react-table中更改单行的边框颜色

How to change the border color of a single row in react-table

javascript

css

reactjs

react-bootstrap

react-table