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＆＃39; documentation，它说我需要解决三件事：

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

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

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

Answer 1

  

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

正如您在MaterialUI documentation页面上看到的

您需要为文档中提供的服务器和浏览器上下文提供相同的用户代理，但是，我强烈建议您不要提供“全部”用户代理，因为您将提供大量不必要的代码给你的最终用户。

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

使用 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 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

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

Answer 5

对我来说，工作（和最干净）的解决方案简短而简单：

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

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

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

Answer 6

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

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

它对我有用！