как стилизовать такой компонент в UI материала в reactjs

Question

введите описание изображения здесь

Я пытаюсь выполнить такую ​​настройку с использованием пользовательского интерфейса материала, но не могу сделать это должным образом с помощью пользовательского интерфейса материала.

Я не могу добавить продукт, добавить и удалить настройку под которым должны быть указаны название продукта и цена, как показано на изображении.

Answer 1

Если жизненно важно использовать material-ui для позиционирования элементов и ожидается, что он будет реагировать на различные разрешения экрана, вы можете использовать https://material-ui.com/components/grid/

В противном случае вы можете просто использовать flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Есть ссылка на коды и ящик для расширений, сделанных через MU Grids https://codesandbox.io/embed/material-demo-dvhfy?fontsize=14&hidenavigation=1&theme=dark