7

使用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. 自动前缀和用户代理
  2. process.env.NODE_ENV

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

PS这个解决方案对我不起作用：-/

4

6 回答 6

6

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

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

您需要为服务器和浏览器上下文提供相同的用户代理，正如您在文档中看到的那样，但是，我强烈不鼓励您提供“全部”用户代理，因为您最终会提供大量不必要的代码-用户。

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

使用express 或 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';
于 2016-06-29T13:10:18.107 回答
4

这应该解决它 

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);
于 2016-02-19T07:54:00.277 回答
4

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

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

然后验证您是否看到在此屏幕截图中使用的多个供应商前缀，-webkit并且-ms两者都在使用：

在此处输入图像描述

于 2016-02-20T23:40:20.287 回答
3

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

于 2016-02-18T12:47:08.610 回答
3

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

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

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

<MuiThemeProvider muiTheme={getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })}>
    <Provider store={store}>
        <MyApplication/>
    </Provider>
</MuiThemeProvider>
于 2016-08-23T17:08:00.617 回答
0

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

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

它对我有用！

于 2016-07-17T15:59:07.553 回答