如何使用材质UI网格在React Admin中组织显示布局

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

我尝试用网格设计我的应用程序风格，这是一场噩梦，我被建议使用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">