Как организовать макет отображения в React Admin с помощью сетки пользовательского интерфейса материала

Question

Я создал несколько представлений Show в новом проекте React-Admin.Вместо того, чтобы поля просто формировали один столбец, я хотел бы использовать компонент Grid Material UI, чтобы упорядочить их в более эффективный и полезный макет.К сожалению, это не позволяет компонентам 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 для рендеринга, и это уже обеспечивает основу для этого.

Answer 1

Я пытался придать стилю свое приложение с сетками, и это был кошмар, мне посоветовали использовать 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">