How to use the office-ui-fabric-react/lib/Utilities.styled function in office-ui-fabric-react

import { styled } from 'office-ui-fabric-react/lib/Utilities';
import { IStackedBarChartProps, IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';
import { StackedBarChartBase } from './StackedBarChart.base';
import { getStyles } from './StackedBarChart.styles';

// Create a StackedBarChart variant which uses these default styles and this styled subcomponent.
export const StackedBarChart: React.FunctionComponent = styled<
  IStackedBarChartProps,
  IStackedBarChartStyleProps,
  IStackedBarChartStyles
>(StackedBarChartBase, getStyles);

import { styled } from 'office-ui-fabric-react/lib/Utilities';
import { IHorizontalBarChartProps, IHorizontalBarChartStyleProps, IHorizontalBarChartStyles } from './HorizontalBarChart.types';
import { HorizontalBarChartBase } from './HorizontalBarChart.base';
import { getHorizontalBarChartStyles } from './HorizontalBarChart.styles';

// Create a HorizontalBarChart variant which uses these default styles and this styled subcomponent.
export const HorizontalBarChart: React.FunctionComponent = styled<
  IHorizontalBarChartProps,
  IHorizontalBarChartStyleProps,
  IHorizontalBarChartStyles
>(HorizontalBarChartBase, getHorizontalBarChartStyles);

return (
      <div>
        {// do not render group header for the first group
        isGroupHeaderVisible ? (
          <div>
            <div>
          </div>
        ) : null}
        {this._renderLinks(group.links, 0 /* nestingLevel */)}
      </div>
    );
  }
}

export const SlimNav = styled(SlimNavComponent, getStyles);
/* tslint:enable */
</div>

import { styled } from 'office-ui-fabric-react/lib/Utilities';
import { INavProps, INavStyleProps, INavStyles } from './Nav.types';
import { NavBase } from './Nav.base';
import { getStyles } from './Nav.styles';

export const Nav: React.StatelessComponent = styled(NavBase, getStyles, undefined, {
  scope: 'Nav'
});

import { IPanelWizardProps, IPanelWizardStyles, IPanelWizardStyleProps } from './PanelWizard.types';
import { styled } from 'office-ui-fabric-react/lib/Utilities';
import { getPanelWizardStyles } from './PanelWizard.styles';
import { PanelWizardBase } from './PanelWizard.Base';

export const PanelWizard: React.FunctionComponent = styled<
  IPanelWizardProps,
  IPanelWizardStyleProps,
  IPanelWizardStyles
>(PanelWizardBase, getPanelWizardStyles, undefined, { scope: 'PanelWizard' });

];
  }

  private _onRTLToggled = () => {
    setRTL(!this._isRTLEnabled, true);
    location.reload();
  };

  private _onDismiss = () => {
    this.setState({
      contextMenu: undefined
    });
  };
}

export const Header: React.StatelessComponent = styled(
  HeaderBase,
  getStyles,
  undefined,
  {
    scope: 'Header'
  }
);

import { ICalendarDayProps, ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types';
import { CalendarDayBase } from './CalendarDay.base';
import { styles } from './CalendarDay.styles';
import { styled } from 'office-ui-fabric-react/lib/Utilities';

/**
 * CalendarDay description
 */
export const CalendarDay: React.FunctionComponent = styled<
  ICalendarDayProps,
  ICalendarDayStyleProps,
  ICalendarDayStyles
>(CalendarDayBase, styles, undefined, { scope: 'CalendarDay' });

const classNames = getClassNames(this.props.styles!, { theme: this.props.theme! });

    if (step.titleElement) {
      return <div>{step.titleElement}</div>;
    }
  };

  private _onRenderFooter = (): JSX.Element =&gt; {
    const classNames = getClassNames(this.props.styles!, { theme: this.props.theme! });
    const step = getStepToShow(this.props.wizardProps);

    return <div>{step.footerElement}</div>;
  };
}

export const PanelWizard: React.FunctionComponent = styled&lt;
  IPanelWizardProps,
  IPanelWizardStyleProps,
  IPanelWizardStyles
&gt;(PanelWizardBase, getPanelWizardStyles, undefined, { scope: 'PanelWizard' });

import { styled } from 'office-ui-fabric-react/lib/Utilities';
import { IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types';
import { DatePickerBase } from './DatePicker.base';
import { styles } from './DatePicker.styles';

/**
 * DatePicker description
 */
export const DatePicker: React.StatelessComponent = styled(
  DatePickerBase,
  styles,
  undefined,
  {
    scope: 'DatePicker'
  }
);

import { styled } from 'office-ui-fabric-react/lib/Utilities';
import { getStyles } from './EditSections.styles';
import { IEditSectionsProps, IEditSectionsStyles } from './Section.types';
import { EditSectionsBase } from './EditSections.base';

export const EditSections: React.FunctionComponent = styled(
  EditSectionsBase,
  getStyles,
  undefined,
  { scope: 'EditSections' }
);