根据条件反应样式网格行

Question

我正在使用 React 数据网格 (https://devexpress.github.io/devextreme-reactive/react/grid/) 来显示数据。
一切正常，但我想将自定义样式（更改背景颜色）添加到特定行，如果 25 之类的值介于 minNumberOfUsers 和 maxNumberOfUsers 之间，例如。
我为这个客户设置了 25 个用户的值。
现在我想看看这个客户当前在哪个等级！
我想通过着色其 tr 背景来做到这一点。
minNumberOfUsers 例如 10，maxNumberOfUsers 第一行有 15！
minNumberOfUsers 例如 20，maxNumberOfUsers 第二行有 30！
在那种情况下，我想要第二行的另一种颜色，因为 25 在第二行中介于 20 和 30 之间！
这就是我现在拥有的：

<Grid
  rows={this.state.fields.priceplan.userPriceTiers || []}
  columns={[
    { name: "minNumberOfUsers", title: "minNumberOfUsers },
    { name: "maxNumberOfUsers", title: "maxNumberOfUsers" },
    { name: "price", title: "priceuser" },
]}>
<CurrencyTypeProvider for={["price"]} />
<NumberTypeProvider for={["minNumberOfUsers", "maxNumberOfUsers"]} />
<Table columnExtensions={[{ columnName: "minNumberOfUsers", width: 150 }, { columnName: "maxNumberOfUsers", width: 150 }]} />
<TableHeaderRow />
</Grid>

当值介于列网格中的值之间时，有人知道如何向 tr 添加自定义类名或样式吗？
我需要这个来显示用户当前的价格等级。

这就是我想要实现的：

上面的层是黄色的，因为我有 25 个用户，25 在 1 到 50 之间。

Answer 1

或者您可以 用您的 CSS className 在 div 中包裹网格，然后在 CSS做： .my-class-name .react-data-grid {}... 然后你就不必使用 !important （最好用 LESS或 SASS，因为您不必每次都输入 .some-class）。这是类似的问题 enter link description here

<div className="custom-style">
     <Grid>
</div>

并在 css

.custom-style.react-data-grid {--------style-------}

Answer 2

您可以在接受另一个 React 组件的 <Table> 元素中传递 rowComponent prop

const TableRow = (props) => (   
const valueToCheck = "25";
<Table.Row {...props}
    style={
      (valueToCheck>=props.row.minNumberOfUsers && valueToCheck<=props.row.minNumberOfUsers)?({backgroundColor: "yellow"}:({}))
    }   /> );

在此组件中，您可以为样式属性中的行定义自定义样式。

您可以在此 url 的行副标题中阅读更多相关信息

根据条件反应样式网格行

React style grid row on condition

styling

reactjs

react-data-grid