Пользовательский интерфейс материала зависит от размера элемента

Question

Я использую React и MaterialUI для создания системы, которая будет отображать виджеты внутри другого (не основанного на React) веб-сайта.Я хотел бы сделать виджеты отзывчивыми, но они должны реагировать на собственную ширину контейнера, а не на ширину окна, так как я не буду знать, сколько страницы займет виджет.

Опции, которые я рассмотрел:

• Опрос размера контейнера на интервальной основе
• Опрос размера контейнера при событиях изменения размера окна
• Настройкадо точки останова темы, основанной на размерах контейнера и окна при запуске

Все это кажется мне довольно уродливым решением.Есть ли элегантный способ делать то, что я хочу?

Answer 1

Чтобы различные @material-ui/core элементы занимали столько же места, сколько контейнер, в который вы их помещаете, я бы использовал компонент Grid.

Я использовал следующее:

<Grid container spacing={24}>
  <Grid item>
    Your content here
  </Grid>
</Grid>

Если вы хотите, чтобы элемент сетки реагировал на такие вещи, как размер экрана, вы можете сделать следующее:

const grid = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 12,
    xl: 12,
};

и

<Grid item {...grid}>

Документация: https://material -ui.com / макет / сетки /