时间戳

首页 > 解决方案 > Material ui only insert theme in html head but doesn't other styles (server side rendering)

reactjs - Material ui only insert theme in html head but doesn't other styles (server side rendering)

问题描述

enter image description here

I've used this tutorial (https://material-ui.com/guides/server-rendering/ ) to configure my SSR but it doesn't work correctly, or it should work in this way? When server returns Html page it consists of only material UI theme but doesn't have styles which I've created in my components, material UI doesn't inject these styles in the head , and you see the broken page on first loading, it looks strange.

import { MuiThemeProvider, ServerStyleSheets } from '@material-ui/core/styles'

const sheets = new ServerStyleSheets()

const components = ReactDOMServer.renderToStaticMarkup(
  <StaticRouter location={ctx.request.url} context={routeContext}>
    <Provider store={ctx.store}>
      <IntlProvider>
        {sheets.collect(
          <MuiThemeProvider theme={theme}>
            <Application history={history} />
          </MuiThemeProvider>
        )}
      </IntlProvider>
    </Provider>
  </StaticRouter>
)

Here is a snippet from my code, I do it the same way as in the tutorial. And one more thing, here as I see styles in head on client-side loading (all styles inserted correctly)

enter image description here

标签： reactjsmaterial-ui

解决方案

我知道这是不可能解决的，此时的材料加载样式，只有你能做些什么来防止它，你可以使用https://material-ui.com/components/skeleton/，向用户展示样式之前的一些内容将被加载到页面。据我了解，甚至 youtube 也采用相同的方法。

推荐阅读