我在一个新的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如此重视渲染,它已经提供了执行此操作的框架。
我尝试用网格设计我的应用程序风格,这是一场噩梦,我被建议使用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">