Material-ui: How to set global navigator.userAgent in server-side rendering

[adieuadieu]

The styles/auto-prefix.js auto-prefixer warns that, "Material-UI expects the global navigator.userAgent to be defined for server-side rendering. Set this property when receiving the request headers."

https://github.com/callemall/material-ui/blob/master/src/styles/auto-prefix.js#L10

Anyone have any example of this being implemented, or have suggestions on how to do this?

[c0b41]

checkout this comment https://github.com/callemall/material-ui/pull/2172#issuecomment-157404901

[adieuadieu]

@ayhankuru thanks, but that's not really a good solution. If a second request is made to the route before the first one has been completed, the second request could modify the GLOBAL.navigator userAgent before it's been used in the first request...

[oliviertassinari]

I was exposing three way, we could improve our server side rendering.

However we could make three different improvement:

• Add what you said to the doc (https://github.com/callemall/material-ui/pull/2172#issuecomment-157404901)
• Use the React Context instead of a global variable to propagate the userAgent
• Allow the prefixAll mode in the browser and not only in the server

I don't have time to work on this, help is welcomed.

[TunpixelCEO]

global.navigator = global.navigator || {};
global.navigator.userAgent = global.navigator.userAgent || 'all';