Блог

Главная - Вопросы по программированию - Как изменить цвет фона строки в компоненте react-admin на основе реквизита?

Как изменить цвет фона строки в компоненте react-admin на основе реквизита?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я разрабатываю таблицу react-admin и хочу определить цвет фона строки по «активному» источнику строки — если это правда, я хочу, чтобы цвет фона строки был зеленым, в противном случае я хочу, чтобы он был красным. Я безуспешно пробовал «makeStyles» material ui (все это для меня ново).

Это моя таблица:

 const myTable = (props) => {

    return (
        <List {...props} pagination={<PostPagination />}>
            <Datagrid>
                <NumberField source="id" />
                <TextField source="name" />
                <TextField source="category" />
                <TextField source="platform" />
                <NumberField source="major" />
                <NumberField source="minor" />
                <BooleanField source="active" label="active"/>
                <DateField source="audit" />
                <EditButton basePath="versions" />
                <DeleteButton basePath="versions" />
            </Datagrid>
        </List>
    )

}

Большое вам спасибо за любую помощь!

Комментарии:

1. Datagrid это пользовательский компонент?

2. вам лучше показать какой-нибудь воспроизводимый пример, представленный в codesandbox …

Ответ №1:

Добрый день, я не совсем понял, что у вас здесь есть строки, но есть много разных вариантов, например:

  1. <MyRow style={{background: (isActive ? 'red' : 'green')} />
  2. <MyRow className={isActive ? classes.activeRow : null />

В первом варианте вам не нужно ничего делать со стилями, а во втором вам придется создавать стиль, например, через makeStyles.

 const useStyles = makeStyles((theme) => ({
    activeRow:{
        backgroundColor: theme.palette.primary.main
    }
  }));