Container и его настройки

Container в библиотеке MUI — это компонент, предназначенный для центрирования и ограничения ширины содержимого страницы. Он служит базовым блоком для построения адаптивной разметки и управления отступами по краям экрана. Container автоматически применяет горизонтальные отступы и может изменять свою ширину в зависимости от точки останова (breakpoint).

Основные свойства Container

  1. maxWidth Свойство maxWidth определяет максимальную ширину контейнера и задаёт, до какого размера содержимое будет расширяться. Возможные значения:

    • 'xs' — до 444px
    • 'sm' — до 600px
    • 'md' — до 900px
    • 'lg' — до 1200px
    • 'xl' — до 1536px Значение false позволяет контейнеру растягиваться на всю ширину экрана.

  2. fixed Булевое свойство fixed заставляет контейнер иметь фиксированную ширину, соответствующую выбранному maxWidth, независимо от ширины экрана.

  3. disableGutters Убирает стандартные горизонтальные отступы (padding), которые по умолчанию добавляются контейнером. Полезно, если требуется, чтобы содержимое полностью прилегало к краям экрана.

Пример использования

import React from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Container maxWidth="md">
      <Typography variant="h4" gutterBottom>
        Пример заголовка
      </Typography>
      <Typography>
        Контейнер ограничивает ширину содержимого и автоматически применяет горизонтальные отступы.
      </Typography>
    </Container>
  );
}

export default App;

В этом примере контейнер будет растягиваться до ширины md (900px) и центрироваться на странице.

Адаптивные настройки

Container поддерживает адаптивные макеты через точки останова. Например, можно задать максимальную ширину для разных экранов:

<Container maxWidth={{ xs: 'sm', md: 'lg', xl: 'xl' }}>
  ...
</Container>

В этом случае:

  • На очень маленьких экранах (xs) ширина ограничится sm.
  • На средних экранах (md) — lg.
  • На очень больших экранах (xl) — xl.

Это позволяет гибко подстраивать интерфейс под любые устройства, не создавая лишнего CSS.

Стилизация Container

Container можно стилизовать несколькими способами:

  1. Через свойство sx Позволяет напрямую передавать стиль в компонент:
<Container sx={{ bgcolor: 'grey.100', p: 4, borderRadius: 2 }}>
  ...
</Container>

Здесь добавляется серый фон, внутренние отступы и скругление углов.

  1. Через тему MUI С помощью функции createTheme можно переопределять поведение Container глобально:
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiContainer: {
      defaultProps: {
        maxWidth: 'lg',
      },
      styleOverrides: {
        root: {
          paddingLeft: '24px',
          paddingRight: '24px',
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        ...
      </Container>
    </ThemeProvider>
  );
}

Различие между fixed и fluid

  • Fixed Container — ширина строго соответствует maxWidth для каждой точки останова. При изменении размера окна ширина контейнера не меняется до следующей точки останова.
  • Fluid Container — при maxWidth={false} контейнер занимает всю ширину окна, но сохраняет горизонтальные отступы по умолчанию, если disableGutters не установлен.

Взаимодействие с Grid

Container часто используется вместе с Grid для создания сеток. Он задаёт центральную область, внутри которой Grid распределяет колонки:

<Container>
  <Grid container spacing={2}>
    <Grid item xs={6}>
      Левый блок
    </Grid>
    <Grid item xs={6}>
      Правый блок
    </Grid>
  </Grid>
</Container>

Container гарантирует, что сетка не прилипнет к краям экрана и будет выглядеть аккуратно на любых устройствах.

Лучшие практики использования

  • Для базовой страницы использовать Container с maxWidth='md' или 'lg'.
  • Если нужен полностью растянутый фон, использовать maxWidth={false} с включением или отключением disableGutters.
  • При построении сетки применять Container как внешний обёртку, чтобы сетка оставалась центрированной.
  • Стили лучше задавать через sx или тему, чтобы избежать прямого CSS и сохранить адаптивность.

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

Оглавление