material-uiのボタンをスタイルする方法

Question

こんにちは私は異なる色の3つのボタンをスタイルしたいと思いますが、これらのボタンが無効になっていると、最初に追加したカスタムスタイルはデフォルトのスタイルdisabledTextColorを上書きします。ユーザーはボタンが無効であることを見ることができます。無効な状態のスタイルを設定するにはどうすればいいですか？また、labelStyleやdisabledTextColorのスタイルを変更する正しい方法は？ここではボタンが常に真

Answer 1

で無効状態はあなたがボタンが無効になっている場合、条件付きlabelStyleをフェードFlatButton周りの小さなラッパーコンポーネントを作成することができるにもかかわらず、レッドのまま、この場合の例

const style = { 
     labelStyle: { 
     color: 'red; 
     } 
    } 

<FlatButton 
     label='Mit Linkedin anmelden' 
     labelPosition='after' 
     icon={<LinkedinIcon />} 
     onClick={() => Meteor.loginWithLinkedin()} 
     disabled={true} 
     labelStyle={style.labelStyle} 
     /> 
    </div> 
    <div className='mdl-cell mdl-cell--12-col'> 
     <FlatButton 
      label='Mit Google anmelden' 
      labelPosition='after' 
      icon={<GoogleIcon />} 
      onClick={() => Meteor.loginWithGoogle()} 
      disabled={true} 
      labelStyle={style.labelStyle} 
     /> 
    </div> 

です。そこ

const CustomFlatButton = (props) => (
    <FlatButton 
    {...props} 
    labelStyle={{ ...props.labelStyle, opacity: props.disabled ? 0.3 : 1 }} 
    /> 
); 

...

<CustomFlatButton label="Disabled Red" style={{ color: 'red' }} disabled /> 

https://jsfiddle.net/6rads3tt/2/