流畅的 UI 风格在通过 CommandBar 按钮传递的命令中不起作用

Question

我在项目中使用Fluent UI，我不知道如何更改

onhover

中的

CommandBar

样式。

我用这个初始化了我的按钮：

// 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'
            },
    }}
/>

这允许我覆盖默认颜色：

我想知道如何在

onhover

组件中设置鼠标

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

部分