Fluent UI 样式在通过按钮传递给 CommandBar 的命令中不起作用

Question

我在我的项目中使用 Fluent UI。我不知道如何在 CommandBar.

中更改 hoover 样式

我用 javascript 中的这个简单代码初始化我的按钮：

// inside `buttons` array
key: 'newfolder',
text: 'New Folder',
iconProps: { 
    iconName: 'NewFolder',
        styles: {
           root: { 
              color: 'orange' 
           }, 
           rootHovered: { 
              color: 'red' 
           }
    } 
},
onClick: ...

然后我将这个按钮传递给 CommandBar:

<CommandBar
    items={buttons}
        styles={{
            root: {
                paddingLeft: '5px'
            },
    }}
/>

而且我可以将默认颜色覆盖为要求的颜色。

我的问题是，如何在 CommandBar 组件中设置鼠标悬停在按钮上的颜色？

如您所见，即使我将 red 作为 rootHovered 颜色传递，它仍然是蓝色。我无法将 Hovered 道具传递给 CommandBar 因为我得到错误：

(property) rootHovered: {}
Type '{ root: { paddingLeft: string; }; rootHovered: {}; }' is not assignable to type 'IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles> | undefined'.
  Object literal may only specify known properties, and 'rootHovered' does not exist in type 'IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles>'.ts(2322)

Answer 1

您可以像这样使用 buttonStyles 属性在悬停时更改它：

text: 'New Folder',
buttonStyles: {
  iconHovered: {
    color: 'red'
  }
},

在 https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar#implementation 部分 ICommandBarItemProps interface

下了解更多关于此道具的信息

Fluent UI 样式在通过按钮传递给 CommandBar 的命令中不起作用

Fluent UI style not working in passed commands with buttons to CommandBar

javascript

reactjs

typescript

fluent-ui

fluentui-react