如何根据 props 更改 react-admin 组件中一行的背景颜色？答案

【问题标题】：How to change the background color of a row in a react-admin component based on props?如何根据 props 更改 react-admin 组件中一行的背景颜色？
【发布时间】：2020-12-20 10:23:48
【问题描述】：

我正在设计一个 react-admin 表，我想通过行的“活动”源来确定行的背景颜色 - 如果它是真的，我希望行背景颜色为绿色，否则我希望它变红。我尝试了 Material ui 的“makeStyles”，但没有成功（所有这些东西对我来说都是新的）。

这是我的桌子：

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>
    )

}

非常感谢您的帮助！

【问题讨论】：

Datagrid 是自定义组件吗？
你最好展示一些可重现的例子，在代码和框中首选...

标签： javascript reactjs

【解决方案1】：

下午好，我真的不明白你这里有字符串，但是有很多不同的选项，例如：

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

在第一个变体中，您不需要对样式做任何事情，而在第二个变体中，您必须通过 makeStyles 创建样式。

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

【讨论】：