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

getXrmP().then(xrm => {

        const data = getURLParameter("data", document.location.search)
        let params = {} as { addressEditorRunProps?: Partial }
        try {
            params = JSON.parse(data || "{}")
        } catch (e) {
            console.log(`${NAME}: Error parsing data object from url. Continuing.`, e)
        }
        props = R.mergeDeepRight(props, params.addressEditorRunProps || {}) as AddressEditorRunProps

        const client = props.client || mkClient(xrm, API_POSTFIX)
        const repo: CustomerAddressDAO = props.addressRepo || new CustomerAddressDAOImpl(client)
        const className = mergeStyles(props.className, defaultStyles, props.styles)
        const sec = new Security(client)
        const metadatap = getEditorEntityMetadata(repo.metadata)

        // todo Remove dependency on Page and rely on form context perhaps, also rely on metadata
        const entityName = xrm.Page.data.entity.getEntityName()
        const access = sec.userPrinicpalAccessForRecord(xrm.Utility.getGlobalContext().getUserId(),
            entityName, cleanId(xrm.Page.data.entity.getId()))

        const controller: DataController =
            props.controller ||
            (props.makeController ? props.makeController(repo) : makeController(repo, directCopyProps))

        const renderit = (target: HTMLElement, metadata: EditorEntityMetadata, access: AccessRights) => {
            const Ed = addEditorState(AddressEditor)
            const defaultRenderEditor = (props: AddressEditorProps) => 
            const specification: EditorSpecification = {

import * as React from 'react';
import { Stack } from '../Stack';
import { IStackStyles, IStackTokens } from '../Stack.types';
import { mergeStyles, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';

// Styles definition
const stackStyles: IStackStyles = {
  root: {
    background: DefaultPalette.themeTertiary
  }
};
const stackItemStyles = mergeStyles({
  alignItems: 'center',
  background: DefaultPalette.themePrimary,
  color: DefaultPalette.white,
  display: 'flex',
  height: 50,
  justifyContent: 'center',
  width: 50
});

// Tokens definition
const sectionStackTokens: IStackTokens = { childrenGap: 10 };
const headingStackTokens: IStackTokens = { childrenGap: 50 };
const numericalSpacingStackTokens: IStackTokens = {
  childrenGap: 10,
  padding: 10
};

style[key] = {
      ...style[key],
      ...codeStyle,
      padding: '6px 20px',
      background: 'white'
    };
  } else {
    // correct text colors (convert to lowercase due to inconsistent casing)
    const color = (style[key].color || '').toLowerCase();
    if (colorMap[color]) {
      style[key].color = colorMap[color];
    }
  }
}

const rootClass = mergeStyles({
  maxHeight: 400
});

export interface ITypeScriptSnippetProps {
  className?: string;
}

/** TypeScript code snippet with a theme similar to Monaco's VS light. */
export const TypeScriptSnippet: React.FunctionComponent = props => {
  return (
    
      {props.children}
    
  );
};

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 { lorem } from 'office-ui-fabric-react/lib/utilities/exampleData';
import { SelectionMode } from 'office-ui-fabric-react/lib/utilities/selection/index';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { getTheme, mergeStyles } from 'office-ui-fabric-react/lib/Styling';

const stickyListTitleClass = mergeStyles({
  paddingTop: '100px'
});

const _columns: IColumn[] = [
  {
    key: 'column1',
    name: 'Test 1',
    fieldName: 'test1',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'column2',
    name: 'Test 2',
    fieldName: 'test2',

import * as React from 'react';
import { Shimmer, ShimmerElementType } from 'office-ui-fabric-react/lib/Shimmer';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

const wrapperClass = mergeStyles({
  padding: 2,
  selectors: {
    '& > .ms-Shimmer-container': {
      margin: '10px 0'
    }
  }
});

export const ShimmerBasicExample: React.StatelessComponent = () => {
  return (
    
      Basic Shimmer with no elements provided. It defaults to a line of 16px height.
      
      
      
      Basic Shimmer with elements provided.

overflow: 'hidden'
      }
    };

    return (
      
        
        <div>
          
            
              I shrink
            
            
              I shrink
            
            
              I don't shrink
            
            
              I shrink
            
          
        </div>

import * as React from 'react';
import { StaticList } from '@uifabric/lists';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

function generateItems(count: number): number[] {
  const itemsArray: number[] = [];
  for (let i = 0; i < count; i++) {
    itemsArray.push(i);
  }
  return itemsArray;
}

const ITEMS: ReadonlyArray = generateItems(25);

const listClassName = mergeStyles({
  listStyleType: 'none',
  margin: 0,
  padding: 0,
  borderLeft: '3px solid #0078d4',
  selectors: {
    li: {
      background: '#ffffff',
      height: 25,
      lineHeight: 25,
      paddingLeft: 27
    },
    'li:nth-child(even)': {
      background: '#f3f2f1',
      height: 50,
      lineHeight: 50
    }

);

const VerticalSeparatorStack = (props: { children: JSX.Element[] }) => (
  
    {React.Children.map(props.children, child => {
      return (
        
          {child}
        
      );
    })}
  
);

const verticalStyle = mergeStyles({
  height: '200px'
});

export class SeparatorBasicExample extends React.Component<{}, {}> {
  public render(): JSX.Element {
    const content = 'Today';

    return (
      
        
          <>
            
            {content}
          
          <>

private _renderItemColumn(row: any, index: number, column: IColumn): JSX.Element | undefined {
    let cell;
    if (column.fieldName === 'c1') {
      cell = row.c1;
    } else if (column.fieldName === 'c2') {
      cell = row.c2;
    } else {
      cell = row.c3;
    }
    const customColorCss = getClassNames(getStyles({ iconColor: cell.iconColor, textColor: cell.textColor, boldText: cell.boldText }));
    const customTextClasses = row.isClickable ? mergeStyles(customColorCss.text, classNames.cursonPointer) : customColorCss.text;
    switch (column.key) {
      case 'facepile':
        return (
          <div data-selection-invoke="{row.isClickable}">
            <span>
              <img height="{24}" width="{24}" src="{cell.facepileImageSrc}">
            </span>
            <span>{cell.content}</span>
          </div>
        );
      case 'icon':
        return (
          <div data-selection-invoke="{row.isClickable}">
            <span>
              
            </span></div>

const _getStatusIcon = (status?: ConfirmationStatus) => {
    if (status) {
      switch (status) {
        case ConfirmationStatus.Success: {
          return ;
        }
        case ConfirmationStatus.Failed: {
          return ;
        }
        case ConfirmationStatus.Warning: {
          return ;
        }
      }
    }

    return null;
  };