Material-UI:如何正确设置用于服务器端呈现的userAgent [英] Material-UI : How to properly set userAgent for server-side rendering

问题描述

我收到此警告:

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

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

with the following server side rendering setup, what am I doing wrong :

    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 +"'")
    }
    })

推荐答案

在此 Razzle Material UI样式示例项目，我是这样设置的:

In this Razzle Material UI Styled Example project I am setting it this way:

server.js :

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

client.js :

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

主要.js :

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

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

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

它运作良好，我认为它也是正确的.

It works well and I think it is correct too.

这篇关于Material-UI:如何正确设置用于服务器端呈现的userAgent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！