react-table：根据行属性值更改行的背景颜色

Question

我遇到一种情况，我必须根据行道具更改行的背景颜色。我目前正在做这个：

const getTrProps = (state, rowInfo, instance) => {
        if (rowInfo) {
            return {
                style: {
                    'background-color': rowInfo.original.customercomplaints.order_ref === currentOrderId ? '' : 'yellow',
                }
            }
        }
        return {};
    }

在

react-table

中，是这样的：

<ReactTableFixedColumns className="-striped"
      columns={customerComplaintsColumns}
      data={customerComplaintsData}
      daultPageSize={10}
      defaultFilterMethod={filterCaseInsensitive}
      getTrProps={getTrProps}
      />

如果我检查该元素，我确实得到了这个：

<div class="rt-tr -even" role="row" style="background-color: yellow;">

但它不适用于该行。我该如何解决这个问题？

我的

react

版本是

^16.13.1

，

react-table

版本是

6.8.6

。

Answer 1

首先，你对风格的分配是错误的。您可能想将背景颜色作为对象样式传递。

例如

        return {
            style: {
                'background': rowInfo.original.customercomplaints.order_ref === currentOrderId ? '' : 'yellow',
            }
        }

此外，您可能希望传递“白色”或您想要的颜色作为默认值，而不是传递空字符串作为默认值。

我认为这是最重要的原因，如果不起作用请告诉我。

react-table 维护者编写的示例链接 https://codesandbox.io/s/k3q43jpl47