How to use the @uifabric/merge-styles/lib/mergeStyles.mergeStyles function in @uifabric/merge-styles

textFieldDisabled: boolean;
  checkboxOneDisabled: boolean;
  checkboxTwoDisabled: boolean;
  checkboxThreeDisabled: boolean;
  choicegroupDisabled: boolean;
  sliderDisabled: boolean;
  likeIconButtonDisabled: boolean;
  bookmarkIconButtonDisabled: boolean;
  sunnyIconButtonDisabled: boolean;
  primaryButtonDisabled: boolean;
  defaultButtonDisabled: boolean;
}

const columnSpace = 48;
const columns = 3;
const sampleColumn = mergeStyles({
  width: (MainPanelNumericalWidth - columnSpace * (columns - 1)) / columns
});
const iconButtonStyles = mergeStyles({
  color: '#0078D4'
});

const commandBarItems = [
  {
    key: 'newItem',
    name: 'New',
    cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache
    iconProps: {
      iconName: 'Add'
    },
    ariaLabel: 'New',
    subMenuProps: {

checkboxThreeDisabled: boolean;
  choicegroupDisabled: boolean;
  sliderDisabled: boolean;
  likeIconButtonDisabled: boolean;
  bookmarkIconButtonDisabled: boolean;
  sunnyIconButtonDisabled: boolean;
  primaryButtonDisabled: boolean;
  defaultButtonDisabled: boolean;
}

const columnSpace = 48;
const columns = 3;
const sampleColumn = mergeStyles({
  width: (MainPanelNumericalWidth - columnSpace * (columns - 1)) / columns
});
const iconButtonStyles = mergeStyles({
  color: '#0078D4'
});

const commandBarItems = [
  {
    key: 'newItem',
    name: 'New',
    cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache
    iconProps: {
      iconName: 'Add'
    },
    ariaLabel: 'New',
    subMenuProps: {
      items: [
        {
          key: 'emailMessage',

import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Tooltip';
import { getRTL } from 'office-ui-fabric-react/lib/Utilities';
import { mergeStyles } from '@uifabric/merge-styles/lib/mergeStyles';
import { FontWeights } from '@uifabric/styling';

const SAMPLE_URL = 'https://contoso.sharepoint.com';

const chevronStyle = mergeStyles({
  fontSize: 8,
  paddingLeft: 3,
  paddingRight: 3
});

const descriptionStyle = mergeStyles({
  fontSize: 12,
  fontWeight: FontWeights.semibold,
  lineHeight: 14,
  textAlign: 'left',
  color: '#797671',
  maxWidth: '100%',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis'
});

export class ChicletBreadcrumbExample extends React.Component {
  constructor(props: {}) {
    super(props);
  }

  public render(): JSX.Element {

import * as React from 'react';
import { Chiclet, ChicletSize } from '@uifabric/experiments';
import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Tooltip';
import { getRTL } from 'office-ui-fabric-react/lib/Utilities';
import { mergeStyles } from '@uifabric/merge-styles/lib/mergeStyles';
import { FontWeights } from '@uifabric/styling';

const SAMPLE_URL = 'https://contoso.sharepoint.com';

const chevronStyle = mergeStyles({
  fontSize: 8,
  paddingLeft: 3,
  paddingRight: 3
});

const descriptionStyle = mergeStyles({
  fontSize: 12,
  fontWeight: FontWeights.semibold,
  lineHeight: 14,
  textAlign: 'left',
  color: '#797671',
  maxWidth: '100%',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis'
});