How to use the office-ui-fabric-react/lib/Styling.mergeStyleSets function in office-ui-fabric-react

import * as React from 'react';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { DetailsList, IGroup, IGroupDividerProps } from 'office-ui-fabric-react/lib/DetailsList';
import { createListItems, createGroups, IExampleItem } from 'office-ui-fabric-react/lib/utilities/exampleData';
import { getTheme, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { DEFAULT_ROW_HEIGHTS } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsRow.styles';

const { rowHeight: ROW_HEIGHT } = DEFAULT_ROW_HEIGHTS;
const GROUP_HEADER_AND_FOOTER_SPACING: number = 8;
const GROUP_HEADER_AND_FOOTER_BORDER_WIDTH: number = 1;
const GROUP_HEADER_HEIGHT: number = 95;
const GROUP_FOOTER_HEIGHT: number = GROUP_HEADER_AND_FOOTER_SPACING * 4 + GROUP_HEADER_AND_FOOTER_BORDER_WIDTH * 2;

const theme = getTheme();
const classNames = mergeStyleSets({
  headerAndFooter: {
    borderTop: `${GROUP_HEADER_AND_FOOTER_BORDER_WIDTH}px solid ${theme.palette.neutralQuaternary}`,
    borderBottom: `${GROUP_HEADER_AND_FOOTER_BORDER_WIDTH}px solid ${theme.palette.neutralQuaternary}`,
    padding: GROUP_HEADER_AND_FOOTER_SPACING,
    margin: `${GROUP_HEADER_AND_FOOTER_SPACING}px 0`,
    background: theme.palette.neutralLighterAlt,
    // Overlay the sizer bars
    position: 'relative',
    zIndex: 100
  },
  headerTitle: [
    theme.fonts.xLarge,
    {
      padding: '4px 0'
    }
  ],

background: DefaultPalette.themePrimary,
  color: DefaultPalette.white,
  padding: 5
};

const boxStyles: IStyle = {
  ...itemStyles,
  display: 'flex',
  justifyContent: 'center' as 'center',
  alignItems: 'center' as 'center',
  width: '50px',
  height: '50px',
  padding: 0
};

const styles = mergeStyleSets({
  root: rootStyles,

  fixedHeight: {
    ...rootStyles,
    height: '200px'
  },

  item: itemStyles,

  boxItem: boxStyles,

  shrinkItem: {
    ...itemStyles,
    width: '400px'
  },

IDetailsHeaderProps,
  Selection,
  IColumn,
  ConstrainMode,
  IDetailsFooterProps,
  DetailsRow
} from 'office-ui-fabric-react/lib/DetailsList';
import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
import { TooltipHost, ITooltipHostProps } from 'office-ui-fabric-react/lib/Tooltip';
import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { SelectionMode } from 'office-ui-fabric-react/lib/Selection';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';

const classNames = mergeStyleSets({
  wrapper: {
    height: '80vh',
    position: 'relative'
  },
  filter: {
    paddingBottom: 20,
    maxWidth: 300
  },
  header: {
    margin: 0
  },
  row: {
    display: 'inline-block'
  }
});

cursor: pointer;
`;

export const closeIcon = css`
  font-size: 30px;
  margin-top: 40px;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 90px;
  &:hover {
    background-color: ${SharedColors.cyanBlue20};
  }
`;

export const navLinkClass = mergeStyleSets({
  actionNav: {
    backgroundColor: SharedColors.cyanBlue10,
    color: 'white',
    fontSize: '16px',
    selectors: {
      '&:hover': {
        displayName: 'testHover',
        color: 'white !important',
        fontSize: '16px',
        backgroundColor: `${SharedColors.cyanBlue20} !important`,
      },
      '&:after': {
        border: '0px !important',
        backgroundColor: `${SharedColors.cyanBlue20} !important`,
        z: '-1',
      },

private readonly defaultFarItemsFactory = (options: ICompositeListFarItemOptions) => {
    const getSelectedText = options.getSelectedText || ((count: number) => `${count} selected`);
    const getSelectedAriaLable = options.getSelectedAriaLabel || ((count: number) => `${count} selected items`);

    const mergedCommandBarItemStyle = mergeStyleSets(
      getCommandBarItemStyle(),
      options.compactMenuProps ? options.compactMenuProps.buttonStyles : undefined
    );

    const farItems: ICommandBarItemProps[] = [
      {
        key: 'search',
        onRender: (): React.ReactNode => {
          const mergedCommandBarSearchBoxStyle = mergeStyleSets(
            getCommandBarSearchBoxStyle(),
            options.searchBoxProps ? options.searchBoxProps.styles : undefined
          );
          return (

public render(): JSX.Element {
    const { theme, getStyles, images } = this.props;
    const styleProps: IPageImageSetStyleProps = { theme: theme! };
    const classNames = getStyles
      ? mergeStyleSets(getDefaultStyles(styleProps), getStyles(styleProps))
      : mergeStyleSets(getDefaultStyles(styleProps));

    return (
      <div>
        {images.map((imageProps: IImageProps) =&gt; (
          <div>
            <img src="{imageProps.src}">
          </div>
        ))}
      </div>
    );
  }
}

import * as React from 'react';
import { HoverCard, IPlainCardProps, HoverCardType, DirectionalHint } from 'office-ui-fabric-react/lib/HoverCard';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { IconButton } from 'office-ui-fabric-react';

const classNames = mergeStyleSets({
  plainCard: {
    width: 200,
    height: 200,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },

  textField: {
    paddingRight: 200
  }
});

interface IHoverCardExampleState {
  target: HTMLElement | null;
  eventListenerTarget: HTMLElement | null;

public render(): JSX.Element {
    const styles = mergeStyleSets({
      root: {
        background: DefaultPalette.themeTertiary,
        width: 300,
        selectors: {
          '> *': {
            width: 50,
            height: 50,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: DefaultPalette.themePrimary,
            color: DefaultPalette.white
          }
        }
      },

public render(): JSX.Element {
    const theme = getTheme();
    this._classNames = mergeStyleSets({
      picker: { maxWidth: 400, marginBottom: 15 },
      headerItem: {
        borderBottom: '1px solid ' + theme.palette.neutralLight,
        padding: '8px 12px'
      },
      footerItem: {
        borderBottom: '1px solid ' + theme.palette.neutralLight,
        height: 60,
        paddingLeft: 12
      },
      to: { padding: '0 10px' }
    });

    return (
      <div>
        {this._renderExtendedPicker()}</div>

height: number;
}

const PHOTOS: IPhoto[] = createArray(250, (index: number) => {
  const randomWidth = 50 + Math.floor(Math.random() * 150);

  return {
    key: index,
    url: `http://placehold.it/${randomWidth}x100`,
    width: randomWidth,
    height: 100
  };
});

const theme = getTheme();
const styles = mergeStyleSets({
  photoList: {
    display: 'inline-block',
    border: '1px solid ' + theme.palette.neutralTertiary,
    margin: 0,
    padding: 10,
    overflow: 'hidden',
    userSelect: 'none'
  },

  photoCell: {
    position: 'relative',
    display: 'inline-block',
    margin: 2,
    boxSizing: 'border-box',
    background: theme.palette.neutralLighter,
    lineHeight: 100,