How To Customize Dropdown Items to use Theme Color in SPFx WebPart

Question

I want to give my dropdown items to use the text themeColor. How can I achieve this? Below is my code:

const dropdownStyles: Partial<IDropdownStyles> = {
      dropdown: { width: "50%" },
      dropdownItem: {
      backgroundColor:"$themePrimary",
      color:"$ms-color-themePrimary"
      }
    };

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

The above does not work. The dropdown items dont use the Primary color which is #a200ff.

Answer 1

As far as I know the "$ms-Bla--bla-bla" notation is only working for (statically) pre-processed fabric-ui files, there is no run-time processing of these variables in spfx. So, you may need to use the theme directly. For example, you could make your dropdownStyles a function instead of a constant. You receive the current theme in parameters then:

const dropdownStyles = (styleProps: IDropdownStyleProps): Partial<IDropdownStyles> => {
  return {
    dropdown: { width: "50%" },
    dropdownItem: {
      backgroundColor: styleProps.theme.palette.themePrimary,
      color: styleProps.theme.palette.themePrimary
    }
  }
};

There are other options as well, like using <ThemeProvider> / useTheme pair for example, using "magic" scss rules like [theme: themePrimary, default: #0078d7] (which are pre-processed at runtime) , using window.__themeState__.theme variable