使用MuiThemeProvider标签对具有反应的材质ui

Question

我从这里开始使用示例性应用程序，使用Material ui的简单react组件开始：https : //www.npmjs.com/package/material-ui 我有以下问题

1. 我们是否需要为每个重要的用户界面组件使用MuiThemeProvider？
2. 有没有办法在全球范围内使用它

对于给定的代码，这工作正常。但是当我在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;

Answer 1

我们是否需要为每个重要的用户界面组件使用MuiThemeProvider？

不，您不需要它。

有什么办法可以全局使用它吗？

是的，您可以在全球范围内使用它。

将应用程序（根）组件包装成一个MuiThemeProvider组件

//assuming app.js as root one

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

从这里开始，在您的app.js以及嵌套或其他组件中，您可以包含所需的任何主题。

例如app.js中的AppBar

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>)
  }
}