Из-за чего не работают стили кастомной кнопки MUI?

1 ответ

По вводным: создал кастомные вариант кнопки, предварительно задеклировав её расширив интерфейс

import "@mui/material/Button"; declare module "@mui/material/Button" { interface ButtonPropsVariantOverrides { iconary: true; } }

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" }, }, }

По вводным: применение варианта iconary:

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

Сейчас ситуация такая: в результате все стили с variant['iconary'] не работают, ошибок нет.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Елена Вебер Ответ

У MUI стили кастомной кнопки чаще всего «не работают» из-за приоритета CSS, неверного селектора или из-за того, что состояние hover/disabled/contained переопределяется стилями компонента. MUI генерирует классы динамически, поэтому править их напрямую через случайный className обычно плохая идея.

Если кнопка одна, самый надежный вариант — использовать prop sx. Он попадает в систему MUI и корректно перекрывает базовые стили компонента:

&lt;Button
  variant="contained"
  sx={{
    backgroundColor: '#2563eb',
    borderRadius: '10px',
    textTransform: 'none',
    fontWeight: 700,
    '&amp;:hover': {
      backgroundColor: '#1d4ed8'
    },
    '&amp;.Mui-disabled': {
      backgroundColor: '#93c5fd',
      color: '#fff'
    }
  }}
&gt;
  Отправить
&lt;/Button&gt;

<Button variant="contained" sx={{ backgroundColor: '#2563eb', borderRadius: '10px', textTransform: 'none', fontWeight: 700, '&:hover': { backgroundColor: '#1d4ed8' }, '&.Mui-disabled': { backgroundColor: '#93c5fd', color: '#fff' } }} > Отправить </Button>

Если кнопка должна быть одинаковой во всем проекте, лучше настроить theme components:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 10,
          textTransform: 'none',
          fontWeight: 700
        },
        containedPrimary: {
          backgroundColor: '#2563eb'
        }
      }
    }
  }
});

const theme = createTheme({ components: { MuiButton: { styleOverrides: { root: { borderRadius: 10, textTransform: 'none', fontWeight: 700 }, containedPrimary: { backgroundColor: '#2563eb' } } } } });

не используйте селекторы вида .css-abc123, они меняются при сборке;
проверьте, что Button находится внутри ThemeProvider;
если используете styled-components/emotion, убедитесь в правильном порядке подключения CSS;
для hover пишите именно '&:hover', а не ':hover' внутри объекта sx;
если стиль не применяется, откройте DevTools и посмотрите, какое правило его перебивает.

Также проверьте variant. Стиль для contained не обязан применяться к outlined или text. Если вы переопределяете root, а проблема только у primary/contained, задавайте конкретное состояние. В большинстве случаев sx или theme overrides решают проблему без !important.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

Из-за чего не работают стили кастомной кнопки MUI?

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно