材料UI凸起按钮不起作用

Question

我逐字地从材质UI（http://www.material-ui.com/#/components/raised-button）逐字复制代码以获取凸起按钮。我已经安装了所有必要的节点模块。发生了什么事？

附上图片下方的错误。基本上它说＆＃34; TypeError：无法读取属性＆＃39; prepareStyles＆＃39;未定义＆＃34;。

＆＃13;

＆＃13;

<RaisedButton label="Primary" primary={true} style={style} />

＆＃13;

＆＃13;

＆＃13;

Answer 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>
);

Answer 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,
};

Answer 3

这个问题应该被关闭和/或投票，因为它已经被问及在这里得到解答：Getting Uncaught TypeError: Cannot read property 'prepareStyles' of undefined while trying to open a Dialog

我没有处理这个问题所需的代表，但我们在这方面不应该有多个问题。