は、私が材料-UIを使用して<code>RaisedButton</code>の背景色のスタイルを設定しようとすると、<code>backgroundColor</code>と呼ばれるその小道具の1つを使用してい独自の小道具とスタイル材料-UI

Question

することはできません：

import React, {Component} from 'react'; 
import RaisedButton from 'material-ui/lib/raised-button'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Home.scss'; 

class Home extends Component { 
    render() { 
     return (
      <div> 
       <h1 className={s.h1}>Pomodoro Tech</h1> 
       <div className={s.imgContain}> 
        <img src={require('./pom.png')} width="100%" height="100%"/> 
       </div> 
       <div> 
        <RaisedButton 
         label="Login" 
         secondary={true} 
         backgroundColor="#77CA2D" 
        /> 
        <RaisedButton 
         backgroundColor="#77CA2D" 
         label="About" 
        /> 
       </div> 
      </div> 
     ); 
    } 
} 

export default withStyles(Home, s); 

しかし、そのプロパティは決して違いはありません。

コマンドの結果によると、使用している素材のバージョンは0.15.0-alpha.1です。

私はこの質問をする前に、私はdone some searchですが、問題の原因を特定できません。

Answer 1

それは私のために働いていますが、さらにそれをデバッグするためにどこかJSBinの実施例を貼り付けたりしてください0.15.0-alpha.1

に破壊されていてもよく、材料-UI v0.14.4を使用してきました。

Answer 2

primary={true}を含まないようにしてください。それ以外の場合はbackgroundColorは無視されます。下記の私の参考資料を参照してください：

<RaisedButton 
    label={stepIndex === 2 ? 'Finish' : 'Next'} 
    disableTouchRipple={true} 
    disableFocusRipple={true} 
    onClick={this.handleNext} 
    backgroundColor={teal400} 
/>