How can I change the color of the Fluent-React UI's command bar?

Question

This is my code. And I want to change the background color maintaining the hovering effect. How can I do that?

<CommandBar
    styles={{
    root: {
    paddingLeft: 0,
    paddingRight: 0,
    selectors: {
        "& .ms-OverflowSet-item:nth-child(4)": {
          display: "flex",
          flexGrow: 1,
      },
    },
  },
}}
overflowItems={props.overflowItems}
items={props.items}
/>

Official documentation => https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar

Thanks in advance!

score 1 · Accepted Answer · answered Feb 26 '23 at 17:23

Here you go... inject inline style or create a shared component as needed

//#region Component Command Bar Ux
private _commandbarItems: ICommandBarItemProps[] = [
    {
        key: 'refresh',
        text: 'Refresh',
        iconProps: { iconName: 'Refresh' },
        onClick: () => this._getDataList(this._filter),
    },
    {
        key: 'run',
        text: 'Run Jobs',
        iconProps: { iconName: 'Play' },
        buttonStyles:{
            root: {
              backgroundColor: '#0078D4',
              color: 'white',
              fontWeight: 'bold',
            }
          },
        onClick: () => this._onCommandSyncDialog(),
    },
...

How can I change the color of the Fluent-React UI's command bar?

1 Answers1