0

I have header and footer spfx extension, I would like to change the background color of commandbar of the footer. But looking for solution to change it.

As in the below image bg color is white, I need it be blue color

enter image description here

After bg color: enter image description here

Footer.tsx

import * as React from "react";  
import { Link } from 'office-ui-fabric-react/lib/Link';  
import { IGobalNavState } from './Components/IGlobalNavState';
import { CommandButton } from 'office-ui-fabric-react/lib/Button';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; 
import { ICommandBarStyleProps } from "@fluentui/react/lib/CommandBar";
import { ContextualMenuItemType, IButtonStyles, Icon, IconButton, IIconProps } from '@fluentui/react';
import { createTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';

require('myScript')

import * as strings from "NavigationApplicationCustomizerStrings";
import styles from "./NavigationApplicationCustomizer.module.scss";
  
export interface IReactFooterProps {}
export interface IReactFooterState {}  
  
export default class ReactFooter extends React.Component<IReactFooterProps, IGobalNavState> {  
  constructor(props: IReactFooterProps) {  
    super(props);  
  }  

  
  
  public render(): JSX.Element {  
    return (  
        <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white`}>
        <div className={'${styles.row}'}>
        <CommandBar  
          style={{backgroundColor:"#27348a",width: "100%"}}
          items={this.getItems()}  
        />
        </div>       
      </div> 
    );  
  }  
  
  // Data for CommandBar  
  private getItems = () => {  
    return [  
      {  
        key: 'microsoft',  
        name: 'Group',  
        cacheKey: 'myCacheKey', // changing this key will invalidate this items cache  
        iconProps: {  
          iconName: 'WebEnvironment'  
        },  
        subMenuProps: { items: [
            { key: 'Site1', text: 'About', href:"https://admin.sharepoint.com/sites/information/default.aspx", iconProps: {  
              iconName: 'BacklogBoard'  
            } },
            { key: 'Site2', text: 'www.services.com', href:"https://www.services.com/", iconProps: {  
              iconName: 'WebSearch'  
            } },
          ],
        },
        href: 'https://www.Microsoft.com'  
      },
      {  
        key: 'contact',  
        name: 'Contact Us',  
        cacheKey: 'myCacheKey', // changing this key will invalidate this items cache  
        iconProps: {  
          iconName: 'Contact'  
        },  
        subMenuProps: { items: [
            { key: 'Site1', text: 'NEED HELP ?', href:"https://admin.sharepoint.com/sites/information/default.aspx", iconProps: {  
              iconName: 'BacklogBoard'  
            } },
            { key: 'Site2', text: '[email protected]', href:"https://www.services.com/", iconProps: {  
              iconName: 'WebSearch'  
            } },
          ],
        },
        href: 'https://www.Microsoft.com'  
      },
      {  
        key: 'officeUIFabric',  
        name: 'Social Media',  
        iconProps: {  
          iconName: 'AzureAPIManagement'  
        },
        subMenuProps: { items: [
          { key: 'Site11', text: 'Youtube', href:"https://sharepoint.com/sites/information/default.aspx", iconProps: {  
            iconName: 'BacklogBoard'  
          } },
          { key: 'Site12', text: 'Twitter', href:"https://www.-services.com/", iconProps: {  
            iconName: 'WebSearch'  
          } },
          { key: 'Site13', text: 'LinkdIn', href:"https://www.-services.com/", iconProps: {  
            iconName: 'WebSearch'  
          } },
          { key: 'Site14', text: 'We', href:"https://www.-services.com/", iconProps: {  
            iconName: 'WebSearch'  
          } },
        ],
      },
        href: 'https://dev.office.com/fabric',  
        ['data-automation-id']: 'uploadButton'  
      }
      
        
      
    ];  
  }  
}  

Nav.ts

if (!this._bottomPlaceholder) {  
this._bottomPlaceholder =  
  this.context.placeholderProvider.tryCreateContent(  
    PlaceholderName.Bottom,  
    { onDispose: this._onDispose });  

// The extension should not assume that the expected placeholder is available.  
if (!this._bottomPlaceholder) {  
  console.error('The expected placeholder (Bottom) was not found.');  
  return;  
}  

const elem: React.ReactElement<IReactFooterProps> = React.createElement(ReactFooter);  
ReactDOM.render(elem, this._bottomPlaceholder.domElement); 
}

1 Answer 1

0

You can refer to the tokens in the following document to custom your command bar https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-theme-colors-in-your-customizations#available-theme-tokens-and-their-occurrences

1
  • It worked ! But for the buttons it is still white color and menuIcons as well, add the image for the same.
    – striker92
    Dec 22, 2022 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.