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