Кастомный вариант кнопки MUI: стили не применяются

При создании собственного варианта (variant) для кнопки Material-UI (MUI) через ButtonPropsVariantOverrides разработчики часто сталкиваются с ситуацией, когда стили, заданные в variants внутри темы, не работают. При этом ошибок в консоли нет, а кнопка отображается без кастомного оформления. Рассмотрим причины и способы решения.

Почему стили кастомного варианта не применяются?

Основная причина - неправильная регистрация варианта в теме MUI. Даже если вы объявили тип через declare module, тема может не содержать соответствующей конфигурации в MuiButton. Убедитесь, что объект variants передан именно в styleOverrides или на верхнем уровне MuiButton.

Правильная структура темы

Варианты должны быть определены внутри createTheme следующим образом:

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'iconary' },
          style: {
            width: 32,
            height: 32,
            minWidth: 'none',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: '5px'
          }
        }
      ],
      styleOverrides: {
        root: {
          textTransform: 'none',
          fontWeight: 400,
          fontSize: 16
        },
        contained: { borderRadius: '10px' },
        sizeMedium: { padding: '8px 32px' },
        sizeLarge: { padding: '12px inherit' }
      }
    }
  }
});

Типичные ошибки и их исправление

1. Забыли обернуть тему в ThemeProvider

Без ThemeProvider кастомные варианты не будут подхвачены. Убедитесь, что ваше приложение обёрнуто в ThemeProvider theme={theme}.

2. Неправильное свойство minWidth

В примере используется minWidth: 'none'. В MUI правильным значением является minWidth: 'unset' или minWidth: 0. Исправьте это в стилях варианта.

3. Конфликт с sx-пропсом

Если вы передаёте sx на кнопку, его стили могут переопределить стили варианта. Проверьте приоритет: sx имеет более высокую специфичность, чем variants.

Проверка применения варианта

После настройки темы используйте кнопку как обычно:

<Button
  onClick={() => setIsChangeNameModalOpened(true)}
  variant='iconary'
  sx={{ backgroundColor: 'primary.light' }}
>
  <EditOutlined fontSize='small' sx={{ color: 'primary.main', width: 16, height: 16 }} />
</Button>

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

Заключение

Проблема с неработающими стилями кастомного варианта кнопки MUI чаще всего решается правильной структурой темы и использованием ThemeProvider. Убедитесь, что вы корректно объявили типы и передали варианты в createTheme. Используйте инструменты разработчика браузера для проверки, какие стили применяются к элементу.