Я также столкнулся с этой проблемой и нашел решение.
Проблема связана с тем, что Mui (MakeStyles) берет ваши CSS имена классов и пытается создать уникальные имена, чтобы избежать коллизий.
Вы можете прочитать об этом здесь: https://material-ui.com/styles/advanced/#next - js
Когда мы выполняем экспорт stati c, предварительно обработанный файл html ссылается на класс имя, которое отличается от имен классов, определенных в папке / _next /.
В вышеупомянутой документации упоминается, что имена классов являются определяющими c, если выполняются три условия (см. выше). Мое решение состояло в том, чтобы просто назвать мою таблицу стилей чем-то, начинающимся с «Mui». Тогда имена классов совпадают как в предварительно отрисованных html, так и в JS в / _next /.
const useStyles = makeStyles(theme => (
{
...
}),
{
name: "MuiCustomStyle"
});
Я уверен, что это не «правильное» решение, но оно решило проблему для меня.