reactjs - 在条件下反应样式网格行

Question

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


tr
minNumberOfUsersmaxNumberOfUsers
minNumberOfUsersmaxNumberOfUsers

<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 组件的元素中传递rowComponentprop<Table>

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）。这是类似的问题 ，请在此处输入链接描述

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

在CSS中

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