React向网格内的表行添加自定义样式

Question

我正在使用React Data Grid（https://devexpress.github.io/devextreme-reactive/react/grid/）来显示数据。
一切正常，但是例如，如果minNumberOfUsers大于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添加自定义类名或样式吗？

Answer 1

或者您可以在div中用CSS className包裹网格，然后在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

您可以在rowComponent元素中传递<Table>道具，该元素接受另一个React组件

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

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

您可以在此url的行子标题中了解更多相关信息