Question

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

我们是否需要为每个人使用MuiThemeProvider 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;

Answer 1

我们是否需要为每个使用MuiThemeProvider和外部材料ui组件？

不，你不需要它。

有没有办法在全球范围内使用它？

是的，你可以全局使用它。

在MuiThemeProvider组件

中包装app（root）组件1

//assuming app.js as root one

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

从此处开始，在您的app.js和嵌套或其他组件中，您可以包含您想要的任何主题。

e.g。 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>)
  }
}

使用MuiThemeProvider标签对材料ui进行反应

1 个答案: