使用react-admin

Question

我正在使用react-admin，但似乎找不到任何概述如何对<SimpleShowLayout>组件中的项目进行分组的文档

我有以下内容：

  <SimpleShowLayout>
                    <TextField source="name"/>
                    <TextField label="ID" source="id"/>
                    <TextField source="tier"/>
                    <SelectField label="Vertical" source="customerVertical" choices={[
                        {id: 0, name: 'Ecommerce'},
                        {id: 1, name: 'Publisher'},
                        {id: 2, name: 'Gaming'},
                        {id: 3, name: 'Other'},
                    ]}/>
                    <SelectField label="Type" source="accountType" choices={[
                        {id: 0, name: 'Test'},
                        {id: 1, name: 'Demo'},
                        {id: 2, name: 'Active'},
                        {id: 3, name: 'Inactive'},
                        {id: 4, name: 'Demo'},
                        {id: 5, name: 'Dev'},
                        {id: 6, name: 'Dev'},
                    ]}/>
   </SimpleShowLayout>

每个项目都显示在新行中，浪费了UI中的宝贵空间。我想使用flexbox将项目集对齐，例如，名称和ID字段应一起显示在同一行上，而垂直和帐户类型应显示在另一行上。 react-admin不喜欢我将它们包装在DIV或SPAN中...

<SimpleShowLayout>也不喜欢我使用材质<Card>，<Grid>或其中的其他任何材质布局组件