(Material UI / Next.js) Прекратить использование стилей из рендеринга на стороне сервера

Question

В настоящее время я работаю над страницей в моем приложении, которой требуется доступ к объекту окна при стилизации.

Я понимаю, что для компонента, который не должен отображаться на сервере, просто используйте <NoSsr>.Но при доступе к окну из useStyles это вызывается перед функцией render().Это означает, что, как только classes=useStyles() будет нажата ошибка: ReferenceError: window is not defined сохраняется.

Есть идеи о том, как остановить вызов useStyles от рендеринга на сервере?

Спасибо!

Answer 1

(отвечает себе)

Нашел решение, которое работает в этом контексте:

1. Используйте <NoSSr> вокруг компонентов, которые должны иметь доступ к глобальному объекту окна,

2. используйте style={{}} на объекте вместо глобального стиля с useStyles() и className.

3. , если тема должна быть доступна, используйте const theme = useTheme() значение от @material-ui/styles