React Starter Kit和Material UI:应在muiTheme上下文中提供userAgent以进行服务器端呈现

Question

使用React Starter Kit,我按如下方式添加Material UI:

npm install material-ui --save

以及导入到组件的以下内容:

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

和:

<RaisedButton label="Default" />

我收到以下错误:

警告:Material-UI:应在muiTheme上下文中提供userAgent以进行服务器端呈现.

根据Material UI的文档,它说我需要解决三件事:

1. autoprefixer和用户代理
2. process.env.NODE_ENV

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

PS 此解决方案对我不起作用: - /

Answer 1

将Material-UI与服务器渲染一起使用时,我们必须为服务器和客户端使用相同的环境.这有两个技术含义.

正如您在MaterialUI文档页面上看到的那样

您需要为文档中提供的服务器和浏览器上下文提供相同的用户代理,但是,我强烈反对您提供"全部"用户代理,因为您将为您的最终提供大量不必要的代码-用户.

相反,您可以轻松地关注MaterialUI文档并传递http请求标头中包含的用户代理值.

使用快递或koa服务器

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

我刚刚检查过它已被添加到ReactStarterKit(未经过自己测试)中src/server.js

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

Answer 2

这对我有用。将其添加到server.js：

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

然后验证您是否看到使用了多个供应商前缀（如此屏幕截图所示）-webkit，并且-ms都已使用：