2016-08-29 7 views
0

私は、CSSやフロントエンドのWeb開発にかなり慣れており、ページのボタンのスタイルを設定する際に問題があります。私はそれのテキストの色を変更し、おそらく私のテーマの主な色を変更する(現在はシアンに見えます、私はそれを青にしたい)。私はmaterial-uiがインラインスタイルに移行したことを知っています。ボタンのスタイルフィールドに変数としてスタイルを渡してみましたが、動作させることができませんでした。どんな助けもありがとう。マテリアルUIバージョン0.15.4でのテキストの色とスタイルの変更

var React = require('react'), 
mui = require('material-ui'), 
LoginDialog = require('./login-dialog.jsx'), 
RaisedButton = mui.RaisedButton, 
MuiThemeProvider = require('material-ui/styles/MuiThemeProvider'), 
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; 

答えて

0

素材uiのスタイルを編集する最もよい方法は、独自のテーマを編集または書き込むことです。ここで

あなたはすでに実装見ることができますテーマ:ここ

https://github.com/callemall/material-ui/tree/master/src/styles/baseThemes

そして、すべての編集可能なプロパティ:それを実装する方法をここに

https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js

そして:

http://www.material-ui.com/#/customization/themes

+0

返事をありがとう!この例を実装しようとすると、次のエラーが発生します: "MuiThemeProvider.render():有効なReact要素(またはnull)が返されなければなりません。 MuiThemeProviderのコンポーネントをネストしないとうまく動作しません。 –

+0

ビットコードを表示することはできますか、どのように実装しましたか?プロバイダに複数のコンポーネントをマウントしようとしているようです – Inoir

関連する問題