React Starter Kit 和 Material UI：应该在 muiTheme 上下文中提供 userAgent 以进行服务器端渲染

Question

与React Starter Kit, I add Material UI如下：

npm install material-ui --save

以及对组件的以下导入：

import RaisedButton from 'material-ui/lib/raised-button';

和：

<RaisedButton label="Default" />

我收到以下错误：

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

根据 Material UI 的 documentation，它说我需要解决三件事：

autoprefixer 和用户代理
process.env.NODE_ENV

我应该输入什么代码以及确切的位置，特别是对于 React Starter Kit？

P.S。 this solution 对我不起作用:-/

Answer 1

尝试在 server.js 文件的顶部添加 global.navigator = { userAgent: 'all' };（Node.js 入口点）。

Answer 2

这应该可以解决问题

import themeDecorator from 'material-ui/lib/styles/theme-decorator';
import RaisedButton from 'material-ui/lib/raised-button';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

class MyComponent extends Component {
 render() {
   return (<RaisedButton label="Default" />);
  }
}

export default themeDecorator(getMuiTheme(null, { userAgent: 'all' }))(MyComponent);

Answer 3

这对我有用。将此添加到 server.js:

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

然后验证您是否看到像此屏幕截图中那样使用了多个供应商前缀，显示 -webkit 和 -ms 都被使用：

Answer 4

When using Material-UI with server rendering, we must use the same environment for the server and the client. This has two technical implications.

如您在 MaterialUI documentation 页面上所见

您需要为服务器和浏览器上下文提供与您在文档中看到的相同的 user-agent，但是，我强烈建议您提供 "all" user-agent，因为您将为 end-user.

提供大量不必要的代码

相反，您可以轻松地遵循 MaterialUI 文档并传递 http 请求 headers.

中包含的 user-agent 值

使用 express 或 koa 服务器

global.navigator = global.navigator || {};
global.navigator.userAgent = req.headers['user-agent'] || 'all';

我刚刚在 src/server.js

中检查了 it has been added to the ReactStarterKit（我自己没有测试）

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

Answer 5

如果您使用的是 KoaJS 服务器，您应该安装 koa-useragent 然后在服务器端渲染之前使用它：

  global.navigator = global.navigator || {};
  global.navigator.userAgent = this.state.userAgent.source || 'all';

对我有用！

Answer 6

对我来说可行的（也是最干净的）解决方案简短而简单：

getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })

示例（来自我的测试应用）：

<MuiThemeProvider muiTheme={getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })}>
    <Provider store={store}>
        <MyApplication/>
    </Provider>
</MuiThemeProvider>

React Starter Kit 和 Material UI：应该在 muiTheme 上下文中提供 userAgent 以进行服务器端渲染

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

reactjs

isomorphic-javascript

material-ui

react-starter-kit