Alert для различных типов уведомлений

Компонент Alert в библиотеке MUI предназначен для отображения уведомлений различного типа, включая информационные сообщения, предупреждения, ошибки и успешные действия. Он является частью пакета @mui/material и строится на базе компонента Snackbar, обеспечивая гибкость и визуальное соответствие Material Design.

Импорт и базовое использование

Для использования компонента необходимо импортировать его из MUI:

import Alert from '@mui/material/Alert';

Простейший пример отображения уведомления:

<Alert severity="success">
  Операция выполнена успешно!
</Alert>

Ключевой параметр severity определяет тип уведомления. Возможные значения:

  • "error" — сообщение об ошибке.
  • "warning" — предупреждение.
  • "info" — информационное сообщение.
  • "success" — успешное действие.

Варианты оформления и стилизации

Компонент Alert поддерживает различные варианты отображения через проп variant:

  • standard — базовый стиль, без дополнительного фона.
  • outlined — с обводкой.
  • filled — с заполнением цветом, соответствующим типу уведомления.

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

<Alert severity="warning" variant="outlined">
  Внимание! Проверьте введенные данные.
</Alert>

<Alert severity="info" variant="filled">
  Информация обновлена.
</Alert>

Добавление иконок и кастомизация

По умолчанию MUI добавляет иконку, соответствующую типу уведомления. Для её замены используется проп icon:

<Alert
  severity="error"
  icon={<CustomErrorIcon />}
>
  Произошла критическая ошибка.
</Alert>

Можно полностью убрать иконку, установив значение false:

<Alert severity="info" icon={false}>
  Новое уведомление без иконки.
</Alert>

Закрытие уведомлений

Компонент поддерживает механизм закрытия через проп onClose. Можно добавить кнопку закрытия:

<Alert
  severity="success"
  onCl ose={() => console.log('Alert закрыт')}
>
  Данные успешно сохранены.
</Alert>

Для интеграции с кнопкой закрытия внутри Alert можно использовать компонент IconButton и CloseIcon из MUI.

Интеграция с Snackbar для временных уведомлений

Для отображения уведомлений, которые автоматически исчезают через заданное время, рекомендуется использовать Snackbar вместе с Alert:

import Snackbar from '@mui/material/Snackbar';

<Snackbar
  open={open}
  autoHideDuration={3000}
  onCl ose={handleClose}
>
  <Alert onCl ose={handleClose} severity="info" variant="filled">
    Сообщение автоматически исчезнет через 3 секунды
  </Alert>
</Snackbar>

Проп autoHideDuration задает время в миллисекундах, после которого уведомление закроется автоматически.

Составные уведомления

Alert поддерживает более сложный контент: заголовок, список действий, ссылки и дополнительные компоненты:

<Alert severity="warning" variant="outlined">
  <AlertTitle>Внимание!</AlertTitle>
  Проверьте поля формы. <strong>Некоторые значения некорректны.</strong>
</Alert>

Использование компонента AlertTitle позволяет выделить заголовок и структурировать уведомление.

Стилизация через sx и theme

Для тонкой настройки внешнего вида применяются sx пропсы или системная тема MUI. Примеры:

<Alert
  severity="success"
  sx={{
    backgroundColor: 'lightgreen',
    color: 'darkgreen',
    borderRadius: 2,
  }}
>
  Кастомизированное успешное уведомление
</Alert>

Использование темы позволяет глобально управлять стилями всех Alert-компонентов:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiAlert: {
      styleOverrides: {
        standardSuccess: {
          backgroundColor: '#d0f0c0',
          color: '#2e7d32',
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Alert severity="success">Тема применена к этому Alert</Alert>
</ThemeProvider>

Итоговые рекомендации по использованию

  • Severity определяет визуальный стиль иконки и цвета.
  • Variant влияет на оформление (filled, outlined, standard).
  • onClose и интеграция с Snackbar позволяют создавать временные уведомления.
  • AlertTitle и вложенные компоненты обеспечивают структурированное сообщение.
  • sx и theme дают возможность гибкой кастомизации под дизайн проекта.

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

Оглавление