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>
        )
    }
}

效果很好，我认为也是正确的。

Material-UI：如何正确设置userAgent以进行服务器端呈现

1 个答案: