最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin6浏览0评论

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论