材料 UI 主题提供程序未正确包含在 react/blaze 应用程序中答案

【问题标题】：Material UI Theme Provider not being included properly in react/blaze app材料 UI 主题提供程序未正确包含在 react/blaze 应用程序中
【发布时间】：2017-01-05 18:51:38
【问题描述】：

问候陨石同胞！

我正在将材料 ui（基于反应）包含到现有的 blaze 应用程序中。我正在使用流星指南和 material-ui 文档作为我的指示来正确执行此操作，但不幸的是无济于事。以前有没有人成功地做到过？根据 material-ui 文档，您应该将 MuiThemeProvider 注入您的主应用程序组件，但我不断收到以下错误：

MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

这是我的根 blaze html 模板：

<template name="main">
  <head>...</head>
  <body>
    <div id="wrap">
      <div id="react-app-wrapper">
        {{> React component=App}}
      </div>
    </div>
 </body>
</template>

请注意，我使用 https://guide.meteor.com/react.html#react-in-blaze 作为我的指导方针，并且正在使用流星包 react-template-helper。

这是我的 main.js 文件：

if(Meteor.isClient){
  import App from './users/client/ui/components/App.js';
  Template.main.onCreated(function(){
  });
  Template.main.helpers({
    'App' : function(){
      return App;
    }
}

还有我的 App.js 组件文件：

import React, { Component, PropTypes } from 'react';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const lightMuiTheme = getMuiTheme(lightBaseTheme);

export default class App extends Component{
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
        <MuiThemeProvider muiTheme={lightMuiTheme} >
        </MuiThemeProvider >
      </div>
    );
  }
}

非常感谢您的帮助！我已经尝试了一切，现在感觉很困惑。 :( 如果你给出正确的答案，我显然会这样标记它！亚历克斯

【问题讨论】：

标签： meteor reactjs meteor-blaze material-ui

【解决方案1】：

这就是MuiThemeProvider renders

render() {
  return this.props.children;
}

因此，实际上，React 没有抱怨要渲染，因为这是你使用的。

render() {
  return (
    <div>
      <MuiThemeProvider muiTheme={lightMuiTheme} >
        {/* There should be something here. */}
      </MuiThemeProvider >
    </div>
  );
}

开始放一些它可以为你服务的内容。

这里需要注意的是，外部 <div> 包装可以在它没有特定用途的前提下被删除。

祝你好运！

【讨论】：