如何正确添加材料-ui到项目?

时间:2017-10-26 20:30:20

标签: reactjs material-ui

我尝试将材料-ui添加到我的React项目中。

运行npm install material-ui -S

我尝试在文档中包含一个示例。

      <div>
        <RaisedButton onClick={this.handleTouchTap} label="Click me" />

        <Popover
          open={open}
          anchorEl={anchorEl}
          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
          onRequestClose={this.handleRequestClose}
        >
          <Menu>
            <MenuItem primaryText="Refresh" />
            <MenuItem primaryText="Help &amp; feedback" />
            <MenuItem primaryText="Settings" />
            <MenuItem primaryText="Sign out" />
          </Menu>
        </Popover>
      </div>

我以下列方式导入所需的material-ui组件 import { RaisedButton, Popover, Menu, MenuItem } from 'material-ui';

这会导致跟踪堆栈跟踪错误。

enter image description here

2 个答案:

答案 0 :(得分:1)

您是否按照文档中的usage进行了操作?

您需要在应用顶部添加import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

答案 1 :(得分:1)

我也有同样的问题。我希望我可以添加 BravoZulu 提交的答案。

您需要使用material-ui code source snippet的元素标记包裹<MuiThemeProvider>(例如,如下所示):

<MuiThemeProvider>

    ...code source from material-ui 

</MuiThemeProvider>

希望这有助于将来的其他人。 :)