有没有一种方法可以为FluentUI下拉控件自定义悬停样式？

Question

我正在使用FluentUI下拉控件，找不到自定义悬停样式的方法。我想将悬停颜色从灰色更改为蓝色。我尝试了以下操作，但似乎没有效果。 任何帮助将不胜感激。

const dropdownStyles: Partial<IDropdownStyles> = {

  dropdownItems: {

    selectors: {

      '& .dropdownItem-168:hover': {

        backgroundColor: '#0067B8',

        color: 'white',

      },

    }, 

};

.dropdownItem-168是下拉项的类。

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

Answer 1

您不会直接在IStyle配置对象中处理生成的CSS类名称（例如dropdownItem-168）。而是，您基于IDropdownStyle属性来定位它们，该属性隔离了组件的不同“入口点”中使用的样式。根据文档，看起来“ dropdownItems”（复数）是为所有下拉项设计容器样式的入口点，而不是容器中各个项目的样式入口点。尝试类似的东西：

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