在 react-table 中为 getTrProps 设置条件背景线性渐变无法正确渲染

Question

我试图在我的反应 table 中对一行进行样式化，以便当某一行的数据发生变化时，背景会对该行的背景应用线性渐变。我已经尝试了几件事，并通过示例查找了他们的文档，但没有成功。

我已经尝试了一些东西，并通过示例查找了他们的文档，但没有成功。

我已经将线性渐变设为一个变量，然后像这样将其插入到条件中：

const gradient = {
  linearGradient: `(to left, #27293d 99%, #344675 1%)`
}

  const getTrProps = (rowInfo) => {
    if (rowInfo) {
      return {
        style: {
          height: `60px`,
          padding: `5px`,
          margin: `5px`,
          borderRadius: `5px`,
          backdropFilter: `blur(15px)`,
          background: rowInfo.status === 'created' ? linearGradient : `red`
        }
      }
    }
    return {};
  }

与相关状态关联的列是这样的：

    {
      Header: 'Status',
      accessor: 'status',
      Cell: row => (
        <div style={{
          width: `${row.value}%`
        }}>
          <span>
            { 
              row.value === 'created' ?  <GreenStatusCircle /> :
              row.value === 'awaiting_driver' ?  <YellowStatusCircle /> :
              row.value === 'delivered' ? <RedStatusCircle /> : "None Found"
            }
          </span>
        </div>
      )
    },

它应该用线性渐变渲染，但我的所有行都是红色的。我看过此处显示的示例：

https://codesandbox.io/s/k3q43jpl47

看起来我做的很好，但它无法正确呈现。

Answer 1

您可以将其作为 HTML 属性传递，但不能作为样式传递

而不是：

const gradient = {
  linearGradient: `(to left, #27293d 99%, #344675 1%)`
}

改为

const gradient = {
  someColor: 'linear-gradient(to left, #27293d 99%, #344675 1%)'
}

我们把它当作

const getTrProps = (rowInfo) => {
    if (rowInfo) {
      return {
        style: {
          height: `60px`,
          padding: `5px`,
          margin: `5px`,
          borderRadius: `5px`,
          backdropFilter: `blur(15px)`,
          background: rowInfo.status === 'created' ? gradient.someColor: `red`
        }
      }
    }
    return {};
  }

示例：https://codesandbox.io/s/react-table-gettrprops-h0oht

在 react-table 中为 getTrProps 设置条件背景线性渐变无法正确渲染

Setting a conditional background linear gradient for getTrProps in react-table not rendering correctly

css

reactjs

react-table