如何设置下拉菜单中Fluent UI复选框的选中样式及hover颜色

核心问题分析 #

你当前的代码里，选中状态的样式配置逻辑有误，没有用正确的CSS伪类匹配复选框选中状态；hover颜色也没覆盖默认的蓝色样式。

修正后的完整样式代码 #

const dropdownStyles = {
  dropdown: { 
      width: '300px',
      color: 'white',
      backgroundColor: '#333333',
      borderWidth: '1px',
      borderColor: 'black',
      borderStyle: 'solid',
  },
  title: {
      backgroundColor: '#333333',
      color: 'white'
  },
  dropdownItem: {
      backgroundColor: '#333333',
      color: 'white'
  },
  dropdownItemSelected: {
      backgroundColor: '#333333',
      color: 'white'
  },
  dropdownItemDisabled: {
      backgroundColor: '#333333',
      color: 'gray'
  },
  dropdownItemHeader: {
      backgroundColor: '#333333',
      color: 'white'
  },
  dropdownItemsWrapper: {
      backgroundColor: '#333333'
  },
  dropdownOptionText: {
      color: 'white'
  },
  subComponentStyles: {
      multiSelectItem: {
          root: {
              selectors: {
                  // 勾选图标颜色
                  '.ms-Checkbox-checkmark': {
                      color: 'white',
                  },
                  // 未选中状态的复选框样式
                  '.ms-Checkbox-checkbox:not(:checked)': {
                      borderColor: 'black',
                      backgroundColor: 'black',
                  },
                  // 选中状态的复选框样式
                  '.ms-Checkbox-checkbox:checked': {
                      backgroundColor: 'red',
                      borderColor: 'red',
                  },
                  // 未选中时hover的样式（覆盖默认蓝色）
                  '.ms-Checkbox-checkbox:hover:not(:checked)': {
                      borderColor: 'darkgray',
                      backgroundColor: '#444444',
                  },
                  // 选中时hover的样式（可选自定义）
                  '.ms-Checkbox-checkbox:checked:hover': {
                      backgroundColor: '#c0392b',
                      borderColor: '#c0392b',
                  }
              },
          }
      }
  }
};

关键修改说明 #

• 选中状态匹配：用:checked伪类直接定位选中的复选框，替换你之前错误的嵌套选择器，确保样式精准生效。
• hover样式覆盖：通过:hover伪类结合状态判断，分别设置未选中/选中时的hover样式，彻底替换默认的蓝色效果。
• 优先级优化：用:not(:checked)明确区分未选中状态，避免选中样式被未选中配置覆盖。

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