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.
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