能否修改Fluent UI下拉框选中项hover时的背景色？

当然可以给Dropdown的选中项hover状态设置自定义样式，以下是具体实现方法：

• 通过组件styles属性局部定制
  利用Fluent UI提供的styles配置项，结合选中项的专属类名与hover伪类，精准覆盖样式：

  import { Dropdown, IDropdownStyles } from '@fluentui/react';
  
  const customDropdownStyles: Partial<IDropdownStyles> = {
    option: {
      '&.ms-Dropdown-option--selected:hover': {
        backgroundColor: '#e0f7fa', // 自定义hover背景色
        color: '#00796b', // 自定义hover文字色
        cursor: 'pointer'
      }
    }
  };
  
  // 渲染Dropdown组件
  <Dropdown
    styles={customDropdownStyles}
    placeholder="选择选项"
    options={[
      { key: '1', text: '选项1' },
      { key: '2', text: '选项2' },
      { key: '3', text: '选项3' }
    ]}
  />
  

• 通过自定义Theme全局统一修改（可选）
  如果需要让所有Dropdown组件的选中项hover样式保持一致，可以通过定制全局Theme实现：

  import { createTheme, ThemeProvider, Dropdown } from '@fluentui/react';
  
  const customTheme = createTheme({
    components: {
      Dropdown: {
        styles: {
          option: {
            '&.ms-Dropdown-option--selected:hover': {
              backgroundColor: '#fce4ec',
              color: '#c2185b'
            }
          }
        }
      }
    }
  });
  
  // 用ThemeProvider包裹应用或目标组件
  <ThemeProvider theme={customTheme}>
    <Dropdown
      placeholder="全局样式示例"
      options={[{ key: 'a', text: '全局选项A' }, { key: 'b', text: '全局选项B' }]}
    />
  </ThemeProvider>
  

核心逻辑：Fluent UI会给选中的Dropdown选项自动添加ms-Dropdown-option--selected类名，结合CSS的:hover伪类，就能精准选中“已选中项+hover”的状态，从而替换默认样式。

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