SSR遇到Prop `className` did not match, 麻烦老师帮忙看一下

来源:4-2 Material-ui安装使用

GongZheng

2018-03-29

看到老师给别人回复的相同问题,我也加了相同的sheetsManage属性,而且看着官方文档又顺了一遍,可是还是出现了这种恼人的问题,而且咱们课程自定义的那些style好像也不能正常工作。麻烦老师帮忙看一下,弄了好久真的有点崩溃了。

http://img.mukewang.com/szimg/5abce5f200017c4019120747.jpg

server-entry.js

import React from 'react';
import { StaticRouter } from 'react-router-dom';
import { Provider, useStaticRendering } from 'mobx-react';
import AppComponent from './views/app';
import { createStoreMap } from './store/store';
import { JssProvider } from 'react-jss';
import { MuiThemeProvider } from 'material-ui/styles';

useStaticRendering(true);

export default (stores, routerContext, url, sheetsRegistry, generateClassName, theme) => (
  <Provider {...stores}>
    <StaticRouter context={routerContext} location={url}>
      <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
        <MuiThemeProvider theme={theme} sheetsManager={new Map()}>
          <AppComponent />
        </MuiThemeProvider>
      </JssProvider>
    </StaticRouter>
  </Provider>
);

export { createStoreMap };

server-render.js

const ejs = require('ejs')
const serialize = require('serialize-javascript')
const ReactSSR = require('react-dom/server')
const asyncBootstrapper = require('react-async-bootstrapper').default
const Helmet = require('react-helmet').default
const SheetsRegistry = require('react-jss').SheetsRegistry
const createMuiTheme = require('material-ui/styles').createMuiTheme
const createGenerateClassName = require('material-ui/styles/createGenerateClassName').default
const colors = require('material-ui/colors')

const getStoreState = (stores) => {
  return Object.keys(stores).reduce((result, storeName) => {
    result[storeName] = stores[storeName].toJson()
    return result
  }, {})
}

module.exports = (bundle, template, req, res) => {
  return new Promise((resolve, reject) => {
    const createStoreMap = bundle.createStoreMap
    const createApp = bundle.default
    const routeContext = {}
    const stores = createStoreMap()
    const theme = createMuiTheme({
      palette: {
        primary: colors.blue,
        secondary: colors.pink,
        type: 'light'
      }
    })
    const sheetsRegistry = new SheetsRegistry()
    const generateClassName = createGenerateClassName()

    const app = createApp(stores, routeContext, req.url, sheetsRegistry, generateClassName, theme)
    asyncBootstrapper(app).then(() => {
      if (routeContext.url) {
        res.status(302).setHeader('Location', routeContext.url)
        res.end()
        return
      }
      const state = getStoreState(stores)
      const helmet = Helmet.rewind()
      const content = ReactSSR.renderToString(app)
      const html = ejs.render(template, {
        appString: content,
        initialState: serialize(state),
        meta: helmet.meta.toString(),
        title: helmet.title.toString(),
        style: helmet.style.toString(),
        link: helmet.link.toString(),
        materialCss: sheetsRegistry.toString()
      })
      res.send(html)
      resolve()
    }).catch(reject)
  })
}


写回答

1回答

Jokcy

2018-03-29

是每一次都这样?你现在安装的material-ui跟我录课的时候差距应该挺大的,建议你先对照一下material-ui官网的服务端渲染配置 https://material-ui-next.com/

0
0

React全栈+服务器渲染(ssr)打造社区Webapp

【毕设面试】只会写业务代码?out了,带你学会搭建属于自己的工程!

768 学习 · 414 问题

查看课程