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

Question

我在一个新的 React-Admin 项目中创建了许多 Show View 。我想使用 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>

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

Answer 1

如果有人仍然在这个问题上磕磕绊绊 - 根据 SimpleShowLayout 在幕后的工作方式，仅仅向前传递 Prop 是不够的。
我正在处理 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>