CODEWITHSUNDEEP
material-ui
Lido Fernandez
Lido Fernandez

Reputation: 456

How to style a buttons in material-ui

Hi I want to style three buttons with different colors but When those buttons are disabled the custom style I've added at the beginning overrides the default style disabledTextColor, which adds a default fade and transparency value, so users can see that the button is disabled. How can style the disabled state or which should be the correct way to style the labelStyle and/or disabledTextColor? Here is an example

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>

in this case the button always stays red even though the disabled state in True

Upvotes: 1

Views: 8173

Answers (1)

Jeff McCloud
Jeff McCloud

Reputation: 5927

You can create a little wrapper component around FlatButton that conditionally fades the labelStyle when the button is disabled.

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/

Upvotes: 4

Related Questions