CODEWITHSUNDEEP
javascriptreactjsbuttonmaterial-ui
SeaWarrior404
SeaWarrior404

Reputation: 4157

How to change the colour of a Button(Material UI) upon setting it as disabled dynamically?

I have a button in a React table which gets disabled based on the value in an adjacent column. For example, if the value in the adjacent column is Claimed, then the button gets disabled, however if it has the value Failed or is blank, the button can be clicked. Right now, Im able to disable button..however the color of the button isnt changing. Im using Material UI React components for the button. How to change the colour of the button when its disabled?

The code is as shown below:

    <FlatButton
          label="CLAIM"
          disabled={
                  item.status === "Claimed" ||
                  item.status === "Progress" ||
                  item.status === "Resolved"
                }
          onClick={//Some action here}
          labelStyle= {
          {
            color: '#FFFFFF',
            fontWeight: 600,
            fontSize: 11,
          }}
          style= {
          {
            borderRadius: '2px',
            width: '60px',
            border: 'solid 1px #d8dde3',
            backgroundColor: '#00bfa5',
          }}

Upvotes: 1

Views: 8878

Answers (1)

Daniel Andrei
Daniel Andrei

Reputation: 2684

You could do something like this :

 const disabled = item.status === "Claimed" ||
                  item.status === "Progress" ||
                  item.status === "Resolved";

       <FlatButton
          label="CLAIM"
          disabled={disabled}
          onClick={//Some action here}
          labelStyle= {
          {
            color: '#FFFFFF',
            fontWeight: 600,
            fontSize: 11,
          }}
          style= {
          {
            borderRadius: '2px',
            width: '60px',
            border: 'solid 1px #d8dde3',
            backgroundColor: disabled ? DISABLED_COLOR' : '#00bfa5',
          }} />

Upvotes: 6

Related Questions