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

将动态设置为禁用时，如何更改按钮（材质UI）的颜色？

1 个答案: