Material-UI：如何为服务器端渲染正确设置 userAgent

Question

我收到了这个警告：

    Material-UI: userAgent should be supplied in the muiTheme 
    context for server-side rendering

使用以下服务器端渲染设置，我做错了什么：

    match({routes: R(), location}, (error, redirectLocation, renderProps) => {
    if (error) {
        console.error("error: "+ error)
    } else if (redirectLocation) {
        console.error("redirect to " + redirectLocation)
    } else if (renderProps) {

        const theme = getMuiTheme({userAgent: "all"})

        page = ReactDOMServer.renderToStaticMarkup(
        <MuiThemeProvider muiTheme={theme}>
            <Provider store={store}>
                <RouterContext {...renderProps} />
            </Provider>
        </MuiThemeProvider>
        )
    } else {
        console.error("location nof found: '"+ location +"'")
    }
    })

Answer 1

在这个Razzle Material UI Styled Example 项目中，我是这样设置的：

server.js:

renderToString(<Application userAgent={request.headers['user-agent']} />)

client.js:

render(<Application userAgent={navigator.userAgent} />, document.getElementById('root'))

Main.js:

class Main extends Component {
    constructor(properties, context) {
        super(properties, context)

        this.muiTheme = getMuiTheme({
            userAgent: properties.userAgent
        })
    }

    render() {
        return (
            <MuiThemeProvider muiTheme={this.muiTheme}></MuiThemeProvider>
        )
    }
}

效果很好，我也觉得是对的。