sharepoint-onlineweb-partsspfxoffice-ui-fabricoffice-ui-fabric-react

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


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.


Solution

  • 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