javascriptfluent-uifluentui-react

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

I am using Fluent UI in my project, and I don't know how to change onhover style in the CommandBar.

I initialised my buttons with this:

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

Then I am passing these buttons to CommandBar:

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

This has allowed me to override the default color:
Styled command bar

I wonder how to set the mouse onhover color in aCommandBar component?

Styled command bar reverted back when mouse hovered over it

As you can see, it is still blue even though I passed red as rootHovered color. I can't pass Hovered prop to CommandBar because I get the following error:

(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)
Solution

  • You can change it on hover by using buttonStyles prop like this:

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

    Find out more about this prop on: https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar#implementation under section ICommandBarItemProps interface