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

import * as React from 'react';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { ColorPicker } from 'office-ui-fabric-react/lib/ColorPicker';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { mergeStyles } from '@uifabric/merge-styles';
import { IColor, getColorFromString } from 'office-ui-fabric-react/lib/Color';

const colorLabelClassName = mergeStyles({
  fontSize: 16,
  fontWeight: 800,
  marginLeft: 20
});

const colorBoxClassName = mergeStyles({
  width: 20,
  height: 20,
  display: 'inline-block',
  position: 'absolute',
  left: 5,
  top: 5,
  border: '1px solid black',
  flexShrink: 0
});

const textBoxClassName = mergeStyles({
  width: 100
});

const colorPanelClassName = mergeStyles({
  position: 'relative' /* This is necessary to make position: absolute; work in the other style. */

fontWeight: 800,
  marginLeft: 20
});

const colorBoxClassName = mergeStyles({
  width: 20,
  height: 20,
  display: 'inline-block',
  position: 'absolute',
  left: 5,
  top: 5,
  border: '1px solid black',
  flexShrink: 0
});

const textBoxClassName = mergeStyles({
  width: 100
});

const colorPanelClassName = mergeStyles({
  position: 'relative' /* This is necessary to make position: absolute; work in the other style. */
});

export interface IThemeDesignerColorPickerProps {
  color: IColor;
  onColorChange: (color: IColor | undefined) => void;
  label: string;
}

export interface IThemeDesignerColorPickerState {
  isColorPickerVisible: boolean;
  editingColorStr?: string;

get: (): string => {
      // tslint:disable-next-line:no-any
      const style: IRawStyle = { [cssProperty]: (getTheme().palette as any)[colorName] };

      return mergeStyles(isHover ? { selectors: { ':hover': style } } : style).toString();
    },
    enumerable: true,

let slots = (memoizedClassNamesMap[displayName] as any).slots;
      let defaultStyles;
      if (!slots) {
        defaultStyles = _resolveStyles(componentProps, theme, tokens, options.styles, settings.styles);
        (memoizedClassNamesMap[displayName] as any).slots = Object.keys(defaultStyles);
        slots = (memoizedClassNamesMap[displayName] as any).slots;
      }

      // Memoize based on the base styling of the component (i.e. without user specified props).
      for (const key of slots) {
        if (!current.map.hasOwnProperty(key)) {
          // Get default styles once if we didn't get them before.
          if (!defaultStyles) {
            defaultStyles = _resolveStyles(componentProps, theme, tokens, options.styles, settings.styles);
          }
          current.map[key] = { className: mergeStyles(defaultStyles[key]), map: {} };
        }
        finalStyles[key] = current.map[key].className;
      }

      if (componentProps.styles) {
        const userStyles: any =
          typeof componentProps.styles === 'function'
            ? componentProps.styles(componentProps as TViewProps, theme, tokens)
            : componentProps.styles;
        styles = concatStyleSets(styles, userStyles);
        if (userStyles) {
          const userStyleKeys = Object.keys(userStyles);
          for (const key of userStyleKeys) {
            if (finalStyles.hasOwnProperty(key)) {
              finalStyles[key] = mergeStyles([current.map[key].className], userStyles[key]);
            } else {

name = name ? normalizeIconName(name) : '';
  name = _iconSettings.__remapped[name] || name;

  if (name) {
    icon = _iconSettings[name!] as IIconRecord;

    if (icon) {
      let { subset } = icon;
      if (subset && subset.fontFace) {
        if (!subset.isRegistered) {
          fontFace(subset.fontFace);
          subset.isRegistered = true;
        }

        if (!subset.className) {
          subset.className = mergeStyles(subset.style, {
            fontFamily: subset.fontFace.fontFamily,
            fontWeight: subset.fontFace.fontWeight || 'normal',
            fontStyle: subset.fontFace.fontStyle || 'normal'
          });
        }
      }
    } else {
      if (!options.disableWarnings && options.warnOnMissingIcons) {
        console.warn(`The icon "${name}" was used but not registered. See http://aka.ms/fabric-icon-usage for more information.`);
      }
    }
  }

  return icon;
}

import { mergeStyles } from '@uifabric/merge-styles';
import { SemanticSlotsDetailsList } from './SemanticSlotsDetailsList';
import { MainPanelInnerContent } from '../shared/MainPanelStyles';
import { getVariant, VariantThemeType } from '@uifabric/variants';

export interface ISemanticSlotsProps {
  theme?: ITheme;
}

const slotClassName = mergeStyles({
  display: 'flex',
  alignItems: 'center',
  overflow: 'auto'
});

const semanticPaletteColorBox = mergeStyles({
  width: 15,
  height: 15,
  display: 'inline-block',
  left: 5,
  top: 5,
  border: '1px solid black',
  flexShrink: 0
});

type IPaletteSlots = {
  [key: string]: string;
};

type IMapping = {
  [key: string]: string;
};

import * as React from 'react';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { ColorPicker } from 'office-ui-fabric-react/lib/ColorPicker';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { mergeStyles } from '@uifabric/merge-styles';
import { IColor, getColorFromString } from 'office-ui-fabric-react/lib/Color';

const colorLabelClassName = mergeStyles({
  fontSize: 16,
  fontWeight: 800,
  marginLeft: 20
});

const colorBoxClassName = mergeStyles({
  width: 20,
  height: 20,
  display: 'inline-block',
  position: 'absolute',
  left: 5,
  top: 5,
  border: '1px solid black',
  flexShrink: 0
});

import * as React from 'react';
import { FabricSlots, IThemeRules } from 'office-ui-fabric-react/lib/ThemeGenerator';
import { MainPanelInnerContent } from '../shared/MainPanelStyles';
import { mergeStyles } from '@uifabric/merge-styles';
import { Text } from 'office-ui-fabric-react';
import { IColor } from 'office-ui-fabric-react/lib/Color';
import { FabricSlotWidget } from './FabricSlotWidget';
import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';

export interface IFabricPaletteProps {
  themeRules?: IThemeRules;
  onFabricPaletteColorChange: (newColor: IColor | undefined, fabricSlot: FabricSlots) => void;
}

const tableClassName = mergeStyles({
  width: '100%',
  selectors: {
    thead: {
      textAlign: 'center'
    },
    tr: {
      padding: 80,
      textAlign: 'left'
    },
    th: {
      display: 'table-cell'
    },
    td: {
      padding: 10,
      textAlign: 'left',
      display: 'table-cell'

export interface IHeaderProps {
  themeRules?: IThemeRules;
}

export interface IHeaderState {
  showPanel: boolean;
  jsonTheme: string;
  powershellTheme: string;
  themeAsCode: any;
}

const outputPanelClassName = mergeStyles({
  display: 'flex'
});

const textAreaClassName = mergeStyles({
  height: 350,
  width: '100%',
  marginRight: 28,
  backgroundColor: 'white',
  color: '#333'
});

const microsoftLogo = mergeStyles({
  width: '120px',
  display: 'block'
});

const pipeFabricStyles = (p: ILinkStyleProps): ILinkStyles => ({
  root: {
    textDecoration: 'none',
    color: p.theme.semanticColors.bodyText,

name = name ? normalizeIconName(name) : '';
  name = _iconSettings.__remapped[name] || name;

  if (name) {
    icon = _iconSettings[name!] as IIconRecord;

    if (icon) {
      let { subset } = icon;
      if (subset && subset.fontFace) {
        if (!subset.isRegistered) {
          fontFace(subset.fontFace);
          subset.isRegistered = true;
        }

        if (!subset.className) {
          subset.className = mergeStyles(subset.style, {
            fontFamily: subset.fontFace.fontFamily,
            fontWeight: subset.fontFace.fontWeight || 'normal',
            fontStyle: subset.fontFace.fontStyle || 'normal'
          });
        }
      }
    } else {
      if (!options.disableWarnings && options.warnOnMissingIcons) {
        warn(`The icon "${name}" was used but not registered. See http://aka.ms/fabric-icon-usage for more information.`);
      }
    }
  }

  return icon;
}