如何将其设置为动态禁用时更改Button（Material UI）的颜色？

Question

我在React表中有一个按钮，根据相邻列中的值禁用该按钮。 例如，如果相邻列中的值是声明的，则该按钮将被禁用，但是如果其值为失败或为空，则可以单击该按钮。 现在，我能够禁用按钮..但是按钮的颜色不会改变。我使用材质UI React组件作为按钮。 如何更改禁用按钮时的颜色？

的代码如下所示：

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

Answer 1

你可以做这样的事情：

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