Реагировать на строку таблицы стилей при условии

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

Вы можете передать rowComponent prop в элементе <Table>, который принимает другой React Component

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

В этом компоненте вы можете определить собственный стиль для строк в атрибуте style.

Подробнее об этом можно прочитать в подзаголовке строки этого url

Answer 2

или вы можете обернуть сетку в элементе div своим именем класса CSS , а затем в своем CSS сделать: .my-class-name .react-data-grid {} .... и тогда вам не нужно использовать! важный (лучше с LESS или SASS, так как вам не нужно каждый раз печатать .some-class).Вот похожая проблема введите описание ссылки здесь

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

и в css

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