如何避免fluent-ui（office ui fabric）按钮点击后保持选中状态

主流UI库的DefaultButton点击后持续保持选中状态，核心原因是组件内置了点击切换选中的持久化逻辑，或是点击后触发的:focus-visible伪类样式没有自动重置。

取消选中状态的属性配置 #

• 若使用的是Fluent UI体系的DefaultButton：直接设置toggle={false}关闭组件的切换选中能力，或是强制绑定checked={false}即可，点击后不会再留存选中状态。
• 若使用的是其他业务二次封装的DefaultButton组件：可查找API文档中是否存在persistSelected、keepActive类的开关属性，将其设置为false即可关闭选中态留存逻辑。

样式配置说明 #

是否需要额外调整选中态样式分两种场景：

• 如果你完全不需要按钮的选中能力，配置完上述属性后通常不需要额外修改样式，组件会自动复用默认的非选中态样式。
• 如果你需要保留选中能力仅调整选中时的视觉效果：需要覆盖组件对应选中态的样式类即可，比如Fluent UI中选中态对应的样式类为ms-Button--checked，可以自定义该类的背景、边框、文字颜色等属性匹配设计要求。

小提示：如果配置属性后仍出现点击后短暂高亮的情况，一般是浏览器默认的:focus伪类样式导致的，可针对该按钮重置outline: none，或是自定义focus状态的样式即可解决。

内容的提问来源于stack exchange，提问作者unknown_boundaries