流利的UI样式无法使用按钮到Commandbar的传递命令来工作

Question

我在项目中使用流利的UI，我不知道如何在commandbar中更改on Holphover样式。

我对此进行了初始化的按钮：

// 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组件中设置鼠标on Hover color？

，

如您所见，即使我将红色作为hoothed color的颜色传递给，它仍然是蓝色的。我不能将悬停 prop传递给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

您可以使用按下按钮道具在悬停在悬停的情况下进行更改：

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

在以下方面了解有关此道具的更多信息： https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar,implementation