材质 UI 凸起按钮不起作用
Posted
技术标签:
【中文标题】材质 UI 凸起按钮不起作用【英文标题】:Material UI Raised Button not working 【发布时间】:2017-05-10 03:27:56 【问题描述】:我从 Material UI (http://www.material-ui.com/#/components/raised-button) 逐字复制了凸起按钮的代码。我已经安装了所有必要的节点模块。发生了什么?
附上图片下方的错误。基本上它说“TypeError:无法读取未定义的属性'prepareStyles'”。
<RaisedButton label="Primary" primary=true style=style />
【问题讨论】:
你能添加更多吗?就像完整的错误堆栈和引发错误的完整组件一样。 刚刚添加的图片 请显示更多代码。 问题出在raisedbutton内部,因此您应用它的样式会引发错误。或者 raisebutton 缺少一些依赖项。 Getting Uncaught TypeError: Cannot read property 'prepareStyles' of undefined while trying to open a Dialog的可能重复 【参考方案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 文档被搞砸了。问题很好。以上是关于材质 UI 凸起按钮不起作用的主要内容,如果未能解决你的问题,请参考以下文章