Razzle: Гидратация стилей не отображается должным образом

Созданный на 3 окт. 2018 · 5Комментарии · Источник: jaredpalmer/razzle

Любящий razzle, такой большой инструмент.

У меня проблема, когда я настраиваю пользовательский интерфейс материалов, и все работает _фантастически_, за исключением одного: при посещении подстраницы и обновлении страницы я получаю страницу с минимальными стилями. На самом деле это увлекательная ошибка, потому что в зависимости от того, какая страница была открыта с последнего yarn start она будет правильно отображать эту страницу только при обновлении, но если я перейду и обновлю ее, она не будет работать (даже на корневом пути).

Запустите сервер с yarn start
Перейдите к http://localhost:3000/blog-posts например
Обновите страницу (все выглядит как дерьмо)
Убить сервер (оставить окно браузера открытым)
Запустите сервер с yarn start
Обновите страницу, и она выглядит красиво (все отображается правильно)
Перейти на _любую_ другую страницу
Обновите, выглядит как дерьмо... и повторите.

Пробовал yarn build && yarn start:prod и система работает, но только с минимальными стилями. Однако, если я найду ссылку и нажму на нее, все приложение снова станет красивым.

Я предполагаю, что это проблема с гидратом или, возможно, с комбинацией этого и @material-ui/core/styles/withStyles . Кто-нибудь из вас сталкивался с этой проблемой?

Классы отличаются ( визуализируется html ) при последующей загрузке страницы, что означает, что это, вероятно, связано с начальной загрузкой изоморфных стилей/классов, которые, как я знаю, относятся к следующим обсуждениям:

Демонстрационный CSS-модуль https://github.com/stereobooster/razzle-cssmodules
https://github.com/jaredpalmer/razzle/issues/428
https://github.com/jaredpalmer/razzle/issues/705

Однако, как показывает моя ситуация выше, это, кажется, работает некоторое время, что заставляет меня думать, что оно ближе, чем кажется из этих обсуждений. Мысли?

Источник

panbanda

Самый полезный комментарий

Вы могли бы подумать, что после долгих утомительных часов исследований и отладки это было бы немного более приятно, но исправление в основном использует after.js, react-jss, генерирует ваш собственный Document а затем строку внизу этой темы (о MuiThemeProvider, который связан только с MUI):

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

Пусть вы все избежите боли. :П

panbanda 8 окт. 2018

🎉4

Все 5 Комментарий

Ха-ха-ха, у меня была такая же проблема с Material UI в Razzle 😢

CharlyJazz 3 окт. 2018

❤4

@CharlyJazz Это очень (en|dis)обнадеживает. Ха-ха, вы пытались уйти от их реализации withStyles и перейти к изоморфным классам?

panbanda 6 окт. 2018

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

Пусть вы все избежите боли. :П

panbanda 8 окт. 2018

🎉4

@jaredpalmer @jylinman Разве нельзя создать пример для документации по драке?

CharlyJazz 8 окт. 2018

Всем, кто сталкивается с этой проблемой, я настоятельно рекомендую следовать официальным документам Material-UI SSR: https://material-ui.com/guides/server-rendering/