如何修改React中Fluent UI下拉框的默认聚焦蓝色？

你当前的样式未生效，是因为Fluent UI的Dropdown组件的聚焦状态并非直接作用在根元素上，需要针对内部的触发元素或输入框元素设置样式。

解决方案1：修改触发按钮的聚焦样式 #

针对下拉框的触发区域（点击展开选项的按钮）设置聚焦样式：

const dropdownStyles = {
  dropdownTrigger: {
    selectors: {
      '&:focus-visible': {
        borderColor: 'green',
        outline: 'none', // 移除默认的outline
        boxShadow: '0 0 0 2px rgba(0, 128, 0, 0.3)' // 可选：添加自定义聚焦光晕
      }
    }
  }
};

解决方案2：修改输入框的聚焦样式（若下拉框支持输入） #

如果你的Dropdown是可输入类型，需要针对内部输入框设置：

const dropdownStyles = {
  input: {
    selectors: {
      '&:focus': {
        borderColor: 'green',
        outline: 'none'
      }
    }
  }
};

完整示例代码 #

const options = [
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'orange', text: 'Orange' }
];

const dropdownStyles = {
  dropdownTrigger: {
    selectors: {
      '&:focus-visible': {
        borderColor: 'green',
        outline: 'none',
        boxShadow: '0 0 0 2px rgba(0, 128, 0, 0.3)'
      }
    }
  },
  input: {
    selectors: {
      '&:focus': {
        borderColor: 'green'
      }
    }
  }
};

<Dropdown
  placeholder="Select an option"
  label="Favorite Fruit"
  options={options}
  styles={dropdownStyles}
/>

说明 #

Fluent UI组件的样式体系基于内部子元素的类名和状态，根元素的:focus伪类无法命中实际获得焦点的内部元素。使用组件提供的dropdownTrigger、input等样式键，配合&:focus-visible或&:focus伪类，才能正确覆盖默认的聚焦样式。

内容的提问来源于stack exchange，提问作者A M N Kumari