cssreactjsoffice-addinsfluent-uifluentui-react

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


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!


Solution

  • 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(),
        },
    ...