office-ui-fabric - 点击后如何不让按钮处于选中状态 - fluent-ui（office ui fabric）

Question

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

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

Answer 1

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

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

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

检查按钮状态时使用styles属性修改按钮样式：rootChecked、rootCheckedHovered 等。

代码笔示例。