SSR遇到Prop `className` did not match, 麻烦老师帮忙看一下
来源:4-2 Material-ui安装使用
GongZheng
2018-03-29
看到老师给别人回复的相同问题,我也加了相同的sheetsManage属性,而且看着官方文档又顺了一遍,可是还是出现了这种恼人的问题,而且咱们课程自定义的那些style好像也不能正常工作。麻烦老师帮忙看一下,弄了好久真的有点崩溃了。

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/
00
相似问题