2016-08-26 44 views
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; 

回答

1

這是一個基本組件BaseMUI.jsx

import React from 'react'; 

import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; 

/** 
* Basic theme bookkeeping for Material UI 
*/ 
class BaseMUI extends React.Component { 
    getChildContext() { 
    return { 
     muiTheme: getMuiTheme(darkBaseTheme) 
    }; 
    } 
} 

BaseMUI.childContextTypes = { 
    muiTheme: React.PropTypes.object 
}; 

export default BaseMUI; 

現在你創建的每個新的組件,使用下面的代碼:

import React from 'react'; 
import BaseMUI from './BaseMUI'; 

class MyComponent extends BaseMUI { 
    // you component code here 
} 

export default MyComponent; 

備註:如果您不想創建額外的組件,則需要在使用Material-UI組件的每個組件中包含getChildContext方法。

+0

嘿,謝謝!有沒有辦法使用darkBaseTheme,因爲我想使用內聯樣式。還有如何使它在標準的JavaScript中工作而不使用額外的組件。再次感謝。 –

+0

@AdityaPatel是的,只需在創建組件時重寫樣式(但您確實需要使用基本樣式,這在許多情況下非常有用)。如果您願意,您也可以創建自己的主題文件。沒有額外的組件,就像我剛纔提到的那樣,只需將'getChildContext'複製到組件中即可。如果它解決了您的問題,請標記答案。 – activatedgeek

+0

感謝您的回覆。嘗試了更改,出現錯誤:getMuiTheme不是函數 –