在条件下反应样式网格行

Question

我正在使用 React Data Grid (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

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

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

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

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

Answer 2

或者您可以使用您的 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-------}