Is there a way to customize on-hover styles for FluentUI drop-down control?

Question

I am using FluentUI drop-down control and can't find a way to customize the on-hover styles. I want to change the on-hover color to blue from grey. I tried following but it didn't seem to work. Any help would be highly appreciated.

const dropdownStyles: Partial<IDropdownStyles> = {

  dropdownItems: {

    selectors: {

      '& .dropdownItem-168:hover': {

        backgroundColor: '#0067B8',

        color: 'white',

      },

    }, 

};

.dropdownItem-168 is the class for drop-down items.

https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown

Answer 1

You don't address the generated css class names (e.g. dropdownItem-168) directly in your IStyle configuration objects. Rather, you target them based upon the IDropdownStyle property that isolates the styles used in different "entry points" of the component. Based on the docs, it looks like "dropdownItems" (plural) is the entry point for styling the container for all drop down items, not the styling entry point for the items within the container individually. try something like:

const dropdownStyles: Partial<IDropdownStyles> = {
    dropdownItem: {  // note: singular "dropdownItem"
        selectors: {
            ":hover" : {
                backgroundColor: "#0067B8", 
                color: "white",
              }
         }
    }
};