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

Question

Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked.

Alternatively, is there any styling that needs to be done for selection?

Answer 1

You can use DefaultButton checked property for that scenario and control it with onClick event:

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

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

Use styles property to modify button styles when button state is checked: rootChecked, rootCheckedHovered etc.

Codepen example.