Миграция с Material-UI на MUI: советы, подводные камни и лучшие практики

На сегодняшний день хорошо известный @material-ui — это legacy-пакет, и все его компоненты были перенесены в новый пакет @mui. Старый пакет больше не поддерживается, а новые компоненты появляются только в @mui. Так что у всех возникает закономерный вопрос: как мигрировать на новый пакет? У меня есть ответ! Конечно, я думал, что процесс не должен быть слишком сложным, ведь это рутинная задача для тысяч разработчиков. Также, mui-t.png) и здесь. Они хорошо работают, если следовать инструкциям, но в случае, когда ты часто используешь такую конструкцию, как makeStyles/withStyles, по всему проекту, и используешь переопределённую коммерческую тему (как minimal.cc в моём случае), ты можешь столкнуться с трудностями. Вот моя история ниже...

makeStyles больше нет

Короче говоря, разработчики решили использовать библиотеку styled в основе, а прежние системы с classes и makeStyles пометили как legacy. Конечно, у этого подхода много преимуществ, но если у тебя много мест, где используется legacy-код, тебе нужно хотя бы заставить его работать.

Спасибо команде разработчиков — они оставили лазейку для использования legacy. Должен помочь пакет @mui/styles. Самая большая ловушка в том, что определение makeStyles всё ещё доступно в @mui/material, но оно возвращает какую-то дичь с типом never и больше похоже на заглушку. Вот картинки, чтобы показать, что я имею в виду: ### ## Твой братан makeStyles

Не твой братан @mui/material/styles.makeStyles, возвращающий never

Так что в компонентах после миграции следует использовать makeStyles только из @mui/styles — это правило! ### ### Подключение переопределений темы для material

Руководство по переопределению material-компонентов доступно здесь и оно очень простое. Но, конечно, с legacy это не так просто, как в случае с styled. Судя по ответам, которые я нагуглил, нужно просто заменить некоторые базовые конструкции на вставки с переопределением темы вот так:

И используй это вот так:

И, как ты помнишь, в компонентах я должен использовать только makeStyles из @mui/styles. И вот в чём проблема — похоже, эти пакеты не синхронизированы, и в этом случае у меня переопределения стилей компонентов работают на уровне темы (через createTheme), но в makeStyles я получаю theme как пустой объект, и не могу использовать никакие утилиты, паттерны или что-либо ещё:

И я получаю неперехваченные исключения и полностью неработающий проект. И это меня расстраивает. Но у нас есть возможность импортировать ThemeProvider также из @mui/styles, и в этом случае я получаю правильную переменную theme со всем необходимым в withStyles компонента, но, к сожалению, я теряю все свои базовые переопределения темы:

Кнопка по умолчанию без стилей — признак того, что я потерял все переопределения темы :(

Но смотри, что я получил взамен :)

Итог

Так что единственное решение, которое я нашёл, — использовать оба ThemeProvider вот так:

Всё работает отлично, в будущем ты можешь использовать оба метода декорирования компонентов, но я бы предпочёл использовать styled как основной. И, конечно, после всех этих манипуляций ты можешь удалить устаревший пакет @material-ui из своего проекта. Ты крут :)