材质 UI 凸起按钮不起作用答案

【问题标题】：Material UI Raised Button not working材质 UI 凸起按钮不起作用
【发布时间】：2017-05-10 03:27:56
【问题描述】：

我从 Material UI (http://www.material-ui.com/#/components/raised-button) 逐字复制了凸起按钮的代码。我已经安装了所有必要的节点模块。发生了什么？

附上图片下方的错误。基本上它说“TypeError：无法读取未定义的属性'prepareStyles'”。

&lt;RaisedButton label="Primary" primary={true} style={style} /&gt;

【问题讨论】：

你能添加更多吗？就像完整的错误堆栈和引发错误的完整组件一样。
刚刚添加的图片
请显示更多代码。
问题出在raisedbutton内部，因此您应用它的样式会引发错误。或者 raisebutton 缺少一些依赖项。
Getting Uncaught TypeError: Cannot read property 'prepareStyles' of undefined while trying to open a Dialog的可能重复

标签： reactjs material-ui

【解决方案1】：

您需要将最顶层的组件（或至少一些父组件）包装在 material-ui 的 MuiThemeProvider 组件：

https://jsfiddle.net/9017dsc2/1/

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class Example extends React.Component {
  render() {
    return (
      <div>
        <RaisedButton label="A Raised Button" />
      </div>
    );
  }
}

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

【讨论】：

酷 - 这为我解决了！我刚刚添加了“从'material-ui/styles/MuiThemeProvider'导入MuiThemeProvider;”它奏效了。谢谢
太棒了，很高兴你成功了！我编辑了我的答案以包含导入以改进其他人的答案。

【解决方案2】：

看起来您的 style 属性未定义。请看document page的代码：

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

const style = {
  margin: 12,
};

const RaisedButtonExampleSimple = () => (
  <div>
    <RaisedButton label="Default" style={style} />
    <RaisedButton label="Primary" primary={true} style={style} />
    <RaisedButton label="Secondary" secondary={true} style={style} />
    <RaisedButton label="Disabled" disabled={true} style={style} />
    <br />
    <br />
    <RaisedButton label="Full width" fullWidth={true} />
  </div>
);

export default RaisedButtonExampleSimple;

有一个固定的样式：

const style = {
  margin: 12,
};

【讨论】：

【解决方案3】：

这个问题应该被关闭和/或否决，因为它已经在这里被问过和回答：Getting Uncaught TypeError: Cannot read property 'prepareStyles' of undefined while trying to open a Dialog

我没有处理此问题所需的代表，但我们不应该对同一件事有多个问题。

【讨论】：

因为 material-ui 文档被搞砸了。问题很好。