如何在SPFx WebPart中自定义下拉项以使用主题颜色

你的代码里直接写"$ms-color-themePrimary"作为颜色值不会生效，因为Fluent UI不会自动解析这个字符串变量，下面提供两种可行的解决方法：

方法一：直接使用实际十六进制颜色值 #

既然你明确主题主色是#a200ff，直接把颜色值写进样式里是最直接有效的方式：

const dropdownStyles: Partial<IDropdownStyles> = {
  dropdown: { width: "50%" },
  dropdownItem: {
    backgroundColor: "#a200ff",
    color: "#a200ff"
    // 如果背景用主题色，建议文本用白色提升可读性：color: "#ffffff"
  },
  // 可选：覆盖hover、选中状态的文本颜色
  dropdownItemHovered: {
    color: "#a200ff"
  },
  dropdownItemSelected: {
    color: "#a200ff"
  }
};

<Dropdown 
  label='Select your List' 
  styles={dropdownStyles} 
  placeholder='---Select an Option---' 
  options={this.state.listNames}
/>

方法二：通过主题对象获取颜色变量 #

如果需要跟随主题动态变化颜色，可通过组件的主题上下文获取正确的颜色值：

类组件写法 #

render() {
  // 从props中获取主题对象
  const { theme } = this.props;
  const dropdownStyles: Partial<IDropdownStyles> = {
    dropdown: { width: "50%" },
    dropdownItem: {
      backgroundColor: theme.palette.themePrimary,
      color: theme.palette.themePrimary
    },
    dropdownItemHovered: {
      color: theme.palette.themePrimary
    },
    dropdownItemSelected: {
      color: theme.palette.themePrimary
    }
  };

  return (
    <Dropdown 
      label='Select your List' 
      styles={dropdownStyles} 
      placeholder='---Select an Option---' 
      options={this.state.listNames}
    />
  );
}

函数组件写法 #

import { useTheme } from '@fluentui/react';

// 函数组件内使用useTheme钩子获取主题
const theme = useTheme();
const dropdownStyles: Partial<IDropdownStyles> = {
  dropdown: { width: "50%" },
  dropdownItem: {
    backgroundColor: theme.palette.themePrimary,
    color: theme.palette.themePrimary
  },
  dropdownItemHovered: {
    color: theme.palette.themePrimary
  },
  dropdownItemSelected: {
    color: theme.palette.themePrimary
  }
};

<Dropdown 
  label='Select your List' 
  styles={dropdownStyles} 
  placeholder='---Select an Option---' 
  options={listNames}
/>

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