点击后如何不在选定的 state 中留下按钮 - fluent-ui（office ui fabric）

Question

当前使用DefaultButton 。 单击时保持选中状态，单击后可以使用哪个属性撤消选择。

或者，是否需要进行任何样式选择？

Answer 1

您可以为该场景使用DefaultButton checked属性并使用onClick事件控制它：

const [isButtonChecked, setIsButtonChecked] = React.useState(false);

<DefaultButton
  checked={isButtonChecked}
  onClick={() => {
    setIsButtonChecked(!isButtonChecked);
  }}
  styles={{
    rootChecked: {
      backgroundColor: '#f00',
      color: '#fff',
    }
  }}
>
  Default Button
</DefaultButton>

选中按钮 state 时，使用styles属性修改按钮 styles： rootChecked、rootCheckedHovered 等。

代码笔示例。