admin管理员组

文章数量:1333201

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 ponents 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',
          }}

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 ponents 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',
          }}
  • javascript
  • reactjs
  • button
  • material-ui
Share asked Oct 16, 2017 at 11:08 SeaWarrior404SeaWarrior404 4,16816 gold badges47 silver badges66 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 6

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',
          }} />

本文标签：

版权声明：本文标题：javascript - How to change the colour of a Button(Material UI) upon setting it as disabled dynamically? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742264619a2443154.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。