javascript - 如何在将按钮(Material UI)动态设置为禁用后更改其颜色？

Question

我在 React 表中有一个按钮，它会根据相邻列中的值而被禁用。例如，如果相邻列中的值为 Claimed，则该按钮将被禁用，但如果其值为 Failed 或为空，则可以单击该按钮。现在，我可以禁用按钮……但是按钮的颜色没有改变。我为按钮使用 Material 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',
          }} />