0
我對material-ui相當陌生,一旦將代碼從0.14.4更新爲0.15.4,我的代碼就無法正常工作。 以下是我的代碼片段:Material-UI:更新庫後代碼不起作用
var React = require('react'),
mui = require('material-ui'),
LoginDialog = require('./login-dialog.jsx'),
RaisedButton = mui.RaisedButton,
MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');
var Index = React.createClass({
//childContextTypes: {
// muiTheme: React.PropTypes.object
//},
//
//getChildContext: function() {
// return {
// muiTheme: ThemeManager.getCurrentTheme()
// };
//},
render: function() {
return (
<div className="mui-app-canvas home-page-background">
<RaisedButton
className="login-button"
label="Login"
onTouchTap={ this._handleLoginDialog }
linkButton={ false } />
<LoginDialog
ref="loginDialog"
loginUrl={ this.props.loginUrl } />
</div>
)
},
_handleLoginDialog: function() {
this.refs.loginDialog.show();
}
});
module.exports = Index;
我得到的錯誤是
TypeError: this.context.muiTheme is undefined
我已經調查使用MuithemeProvider和包裝我的代碼,它在文檔中顯示的方式:
http://www.material-ui.com/#/get-started/usage
但是我收到了一個不同的錯誤。任何幫助,將不勝感激。
討論以下之後是溶液
材料-UI /風格/ getMuiTheme.js是從ES2015源transpiled,並且函數導出爲默認。
編輯代碼@activatedgeek和@robertkelp討論後
var React = require('react'),
mui = require('material-ui'),
LoginDialog = require('./login-dialog.jsx'),
RaisedButton = mui.RaisedButton,
MuiThemeProvider = require('material-ui/styles/MuiThemeProvider'),
getMuiTheme = require('material-ui/styles/getMuiTheme').default,
darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme');
var Index = React.createClass({
getChildContext: function() {
return {
muiTheme: getMuiTheme(darkBaseTheme)
};
},
childContextTypes: {
muiTheme: React.PropTypes.object
},
render: function() {
return (
<div className="mui-app-canvas home-page-background">
<RaisedButton
className="login-button"
label="Login"
onTouchTap={ this._handleLoginDialog }
linkButton={ false } />
<LoginDialog
ref="loginDialog"
loginUrl={ this.props.loginUrl } />
</div>
)
},
_handleLoginDialog: function() {
this.refs.loginDialog.show();
}
});
module.exports = Index;
嘿,謝謝!有沒有辦法使用darkBaseTheme,因爲我想使用內聯樣式。還有如何使它在標準的JavaScript中工作而不使用額外的組件。再次感謝。 –
@AdityaPatel是的,只需在創建組件時重寫樣式(但您確實需要使用基本樣式,這在許多情況下非常有用)。如果您願意,您也可以創建自己的主題文件。沒有額外的組件,就像我剛纔提到的那樣,只需將'getChildContext'複製到組件中即可。如果它解決了您的問題,請標記答案。 – activatedgeek
感謝您的回覆。嘗試了更改,出現錯誤:getMuiTheme不是函數 –