0

I am currently developing a web part using the SPfx.

Wnated to know how can we edit or override the styles for office UI fabric react ? Thanks in advance.

BreadCrumb.module.scss

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

    .BreadCrumb{
       .textcolor{
           color:red;
       }
    }

BreadCrumb.tsx

    import * as React from 'react';
    import { Breadcrumb, IBreadcrumbItem, IDividerAsProps } from 'office-ui- 
    fabric-react/lib/Breadcrumb';
    import styles from './BreadCrumb.module.scss'; 

    export class BreadCrumb extends React.Component<any, any> {
    constructor(props: {}) {
        super(props);
    }

    public render(): JSX.Element {
        return (            
            <Breadcrumb 
          items={[
            { text: 'aaa', key: 'aaa', onClick: this._onBreadcrumbItemClicked , isCurrentItem: true},
            { text: 'bbb', key: 'bbb', onClick: this._onBreadcrumbItemClicked },
            { text: 'ccc', key: 'ccc', onClick: this._onBreadcrumbItemClicked }
          ]}
          ariaLabel={'Website breadcrumb'}
        />
        );
    }

    private _onBreadcrumbItemClicked = (ev: React.MouseEvent<HTMLElement>, item: IBreadcrumbItem): void => {
        console.log(`Breadcrumb item with key "${item.text}" has been clicked.`);
      }
}
  • Try adding className={styles.BreadCrumb} to <Breadcrumb /> JSX element. Place the color:Red in the .BreadCrumb css class – Anupam Jagatdeo Jul 6 '18 at 6:43
  • I tried this but it is not applying the style – Brijesh Kothari Jul 6 '18 at 7:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.