将 MuiThemeProvider 标签用于带有反应的材料 ui答案

【问题标题】：Using MuiThemeProvider tag for material ui with react将 MuiThemeProvider 标签用于带有反应的材料 ui
【发布时间】：2017-08-20 04:19:11
【问题描述】：

我从使用演示应用程序的材料 ui 的简单反应组件开始，如下所述： https://www.npmjs.com/package/material-ui 我有以下问题

我们是否需要为每个和 evert材质ui组件？
有什么办法可以全局使用

这对于给定的代码工作正常。但是当我在 MuiThemeProvider 标签中添加任何其他组件时，它不会呈现任何内容，并且 webpack 不会抛出任何错误。

让我们看看下面的例子。我只是将 MyAwesomeReactComponent 复制了两次，它就停止了工作。如果我删除 MyAwesomeReactComponent 的第二个实例，这会正常工作。

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

这里是 MyAwesomeReactComponent.js 的代码

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const MyAwesomeReactComponent = () => (
  <RaisedButton label="Default" />
);

export default MyAwesomeReactComponent;

【问题讨论】：

用 div 标签包装你的组件，然后使用主题提供者。
谢谢，这有帮助。知道这是否是使用
标签的材料 ui 实现中的错误？
我不确定这是否是一个错误，但是当您向MuiThemeProvider 注入多个组件时，它不会起作用，因为它只需要一个反应组件。

import AppBar from 'material-ui/AppBar'; const AppBarExampleIcon = () => ( <AppBar title="Title" iconClassNameRight="muidocs-icon-navigation-expand-more" /> ); export default class App extends Component { render(){ return (<div className="container"><AppBarExampleIcon /></div>) } }