css - 有没有办法为 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

标签： cssoffice-ui-fabricoffice-ui-fabric-reactfluent-ui

Answer 1

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

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