How to organise a Show layout in React Admin using a Material UI Grid

Question

I've created a number of Show views in a new React-Admin project. Rather than have the fields just form a single column I would like to use Material UI's Grid component to arrange them into a more efficient and helpful layout. Unfortunately this stops React Admin's ...ShowLayout components from rendering the Field components inside them properly.

I was hoping to be able to do something like this:

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

I've also had a go at creating wrapper components to try to ensure the right props get passed along to the Field components, to no avail. How can I better arrange the fields in a layout? Do I have to fall back to "manually" styling the contents of a show layout using custom styles? If so that seems a shame given that RA uses MUI so heavily for rendering and it already provides a framework for doing this.

Answer 1

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

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