如何设置Fluent UI Checkbox hover时不显示勾选标记

你可以通过以下两种方式实现需求：

1. 利用组件属性调整（优先推荐） #

如果用的是Fluent UI React v9版本，直接给Checkbox设置appearance="outline"就能改变hover时的表现，默认的hover勾选标记会消失：

<Checkbox appearance="outline" label="你的选项文本" />

要是用的是v8版本，就需要结合样式覆盖来处理。

2. 自定义样式强制隐藏 #

不管是哪个版本，都能通过CSS直接覆盖默认的hover效果：

针对v9版本 #

.fui-Checkbox:hover .fui-Checkbox__indicator::before {
  display: none;
}

针对v8版本 #

.ms-Checkbox:hover .ms-Checkbox-checkmark {
  display: none;
}

也可以通过组件的styles属性内联设置（v8适用）：

<Checkbox
  label="你的选项文本"
  styles={{
    checkmark: {
      selectors: {
        ':hover': {
          display: 'none'
        }
      }
    }
  }}
/>

如果遇到类名不匹配的情况，直接用浏览器开发者工具查看Checkbox的DOM结构，找到hover状态下负责显示勾选标记的元素，再调整选择器即可。

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