Я использую Nextjs с Material UI , а Material UI CSS не загружается должным образом при загрузке первой страницы, как на картинке. не так выглядит при первом посещении введите описание изображения здесь

Правильный с правильным стилем после перехода страницы введите описание изображения здесь

(есть много других экземпляров, например, такие элементы, как заголовок с фиксированной позицией, не на своем месте и т. д.)

Но когда я перехожу с одной страницы на другую или даже вызываю команду setState , все идет на свое место и применяется CSS. Я думаю, это из-за несоответствия имен классов между сервером и клиентом. Я применил _app и _document из эта ссылка, и проблема не устранена.

Поэтому для меня есть только один вариант - добавить Twitter или Instagram, например, загрузку первой страницы на сайт, поэтому, если это первое посещение, которое отображается пользователю, то из-за вызова для установки некоторого состояния все отображается правильно. Итак, как я могу определить в nextjs, если это первое посещение страницы пользователем на сайте, и я не хочу использовать поставщик контекста, потому что мне нужно добавить потребителя на каждую страницу, а на сайте много страниц

Есть ли какой-либо обходной путь или решение этой проблемы. Я искал ответ в течение нескольких недель, и я спросил создателей Material UI, и они сказали, что с некоторым предстоящим обновлением он будет исправлен, но до того, что я должен делать ?

0
SC K 9 Фев 2021 в 20:00

1 ответ

Лучший ответ

Спустя столько дней я заметил, что в моем файле _document.js

import { ServerStyleSheets } from "@material-ui/styles";

Я изменил это на

import { ServerStyleSheets } from "@material-ui/core/styles";

И после этого был применен CSS, и я избавился от проблем с мерцанием

0
SC K 12 Фев 2021 в 14:13