При использовании гидрата, почему мы должны сопоставить classNames на сервере и клиенте, и как?

Question

Я использую React 16 & Hydrate. Мой server.js использует StaticRouter, а мой клиент использует BrowserRouter. Я использую Material-UI.

Я постоянно получаю предупреждение о несоответствии классов.

Почему это предупреждение? Каково значение этого предупреждения? Это угроза безопасности или просто лучшая практика? Как мне перестать получать это предупреждение?

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

Answer 1

Material UI генерирует разные классы для каждого компонента после рендеринга.Буквально невозможно предсказать, каким будет имя конечного класса.Пока вы находитесь на локальном хосте, класс может быть .newLoanStepper-root-247 , но после сборки приложения имя класса изменится на что-то вроде .jss01026

Вам нужно будет следовать руководству MUI для рендеринга сервера, если вы хотите использовать библиотеку https://material -ui.com / guides / server-render /