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

Posted 2023-02-22

【中文标题】如何使用 Material UI Grid 在 React Admin 中组织 Show 布局

【英文标题】：How to organise a Show layout in React Admin using a Material UI Grid

【发布时间】：2019-09-09 01:46:35

【问题描述】：

我在一个新的 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 进行渲染并且它已经提供了一个框架来执行此操作，这似乎是一种耻辱。

【问题讨论】：

这能回答你的问题吗？ How do I have more complex layouts in `react-admin` "Show" and "Edit" and "Create" screens?

【参考方案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>

【参考方案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">

【讨论】：

如果你真的想使用Grid，你可以使用lg、sm、xs等设置样式来配置组件的大小。知道整个屏幕有 12 个单位的宽度，如果你想要两个元素并排，例如，使用如下配置：sm=6 for each

Box 在古老的 React-Admin Material-UI 版本中不可用。而且这个解决方案可能也不会渲染孩子，比如 TextField （在 React-Admin 页面中，他们不知何故没有收到道具）

github.com/marmelab/react-admin/issues/…

文本字段未呈现。