如何使用 Material UI Grid 在 React Admin 中组织 Show 布局

Question

我在一个新的 React-Admin 项目中创建了许多 Show 视图。我不想让这些字段仅形成一列，我想使用 Material UI 的 Grid 组件将它们排列成更有效和有用的布局。不幸的是，这会阻止 React Admin 的 ...ShowLayout 组件正确呈现其中的 Field 组件。

我希望能够做这样的事情：

<Show {...props}>
    <SimpleShowLayout>
        <Grid container>
            <Grid item>
                <TextField source="firstName" />
            </Grid>
            <Grid item>
                <TextField source="lastName" />
            </Grid>
        </Grid>      
    </SimpleShowLayout>
</Show>

我还尝试过创建包装器组件以尝试确保将正确的道具传递给 Field 组件，但无济于事。如何更好地安排布局中的字段？我是否必须退回到使用自定义样式“手动”设置显示布局内容的样式？如果是这样的话，考虑到 RA 大量使用 MUI 进行渲染并且它已经提供了一个框架来执行此操作，这似乎是一种耻辱。

Answer 1

如果有人仍然在这个问题上遇到问题 - 根据 SimpleShowLayout 在幕后的工作方式，仅将道具向前传递是不够的。

我正在开发一个react-admin npm 包，我在其中实现了一个基本的递归GridShowLayout。它允许您嵌套尽可能多的 <Grid> 组件，如 @Pedro Viera 所示，react-admin fields 仍将收到所需的 props。

还有一个BoxedShowLayout，你可以在这里查看：ra-compact-ui/GridShowLayout

例子：

<Show {...props}>
    <GridShowLayout>
        <Grid container>
            <Grid >
                <TextField source="firstName" />
            </Grid >
            <Grid >
                <TextField source="lastName" />
            </Grid >
        </Grid >      
    </GridShowLayout>
</Show>

Answer 2

我尝试使用网格来设计我的应用程序，但这是一场噩梦，我被建议改用flexboxes，其优点是它的响应速度非常快。你可以这样做：

import { unstable_Box as Box } from '@material-ui/core/Box';

<Show {...props}>
    <SimpleShowLayout>
        <Box display="flex">
            <Box>
                <TextField source="firstName" />
            </Box>
            <Box>
                <TextField source="lastName" />
            </Box>
        </Box>      
    </SimpleShowLayout>
</Show>

并使用 material-ui 文档中的所需配置，例如

<Box display="flex" flexWrap="wrap" justifyContent="center" alignItems="center">