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

import * as React from 'react';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { Label } from 'office-ui-fabric-react/lib/Label';
import { TooltipHost, TooltipOverflowMode, ITooltipHostStyles } from 'office-ui-fabric-react/lib/Tooltip';
import { mergeStyleSets, getTheme } from 'office-ui-fabric-react/lib/Styling';
import { css } from 'office-ui-fabric-react/lib/Utilities';
import { useId } from '@uifabric/react-hooks';

const contentParent = "If the parent element's content overflows, hovering here will show a tooltip (anchored to the parent element).";
const contentSelf = "If the TooltipHost's content overflows, hovering here will show a tooltip (anchored to the TooltipHost).";

// The TooltipHost uses display: inline by default, which causes issues with this example's
// styling and layout. Use display: block instead. (other styles are just to look nice)
const theme = getTheme();
const hostStyles: Partial = {
  root: { display: 'block', padding: 10, backgroundColor: theme.palette.themeLighter }
};
const classNames = mergeStyleSets({
  // Applied to make content overflow (and tooltips activate)
  overflow: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    width: 200
  },
  // Just to look nice
  example: { marginTop: 20, selectors: { '> *:first-child': { paddingBottom: 10 } } },
  parent: { padding: 10, border: '2px dashed ' + theme.palette.neutralTertiary, selectors: { '> *:last-child': { marginTop: 10 } } }
});

import * as React from 'react';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { DetailsHeader, DetailsList, IDetailsHeaderProps, 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'
    }

export const getStyles: IStyleFunction = props => {
  const { theme = getTheme() } = props;
  const pivotStyles: Partial = {
    root: [{ paddingTop: 20 }, globalClassNames.pivot]
  };
  return {
    issueList: [
      {
        maxHeight: 400,
        overflowY: 'auto'
      },
      globalClassNames.issueList
    ],
    button: [
      {
        marginBottom: 10,
        // Temporary workaround for https://github.com/OfficeDev/office-ui-fabric-react/issues/6782.
        selectors: {

<div style="{{">
        
          
            
              
            
            
              </div>

import * as React from 'react';
import { GroupedList, IGroup, IGroupHeaderProps, IGroupFooterProps } from 'office-ui-fabric-react/lib/GroupedList';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { createListItems, createGroups, IExampleItem } from 'office-ui-fabric-react/lib/utilities/exampleData';
import { getTheme, mergeStyleSets, IRawStyle } from 'office-ui-fabric-react/lib/Styling';

const theme = getTheme();
const headerAndFooterStyles: IRawStyle = {
  minWidth: 300,
  minHeight: 40,
  lineHeight: 40,
  paddingLeft: 16
};
const classNames = mergeStyleSets({
  header: [headerAndFooterStyles, theme.fonts.mediumPlus],
  footer: [headerAndFooterStyles, theme.fonts.medium],
  name: {
    display: 'inline-block',
    overflow: 'hidden',
    height: 24,
    cursor: 'default',
    padding: 8,
    boxSizing: 'border-box',

import * as React from 'react';
import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
import { Image } from 'office-ui-fabric-react/lib/Image';
import { getId } from 'office-ui-fabric-react/lib/Utilities';
import { useConst } from '@uifabric/react-hooks';
import { mergeStyleSets, getTheme } from 'office-ui-fabric-react/lib/Styling';

const theme = getTheme();
const classNames = mergeStyleSets({
  photoList: {
    display: 'inline-block',
    border: '1px solid ' + theme.palette.neutralTertiary,
    padding: 10,
    lineHeight: 0,
    overflow: 'hidden'
  },
  photoCell: {
    position: 'relative',
    display: 'inline-block',
    padding: 2,
    boxSizing: 'border-box',
    selectors: {
      '&:focus': {
        outline: 'none'

}

};

export const textFielDueDateDatePickerStyles: ITextFieldProps = {
  styles: {
    field: { backgroundColor: DefaultPalette.neutralLighter },
    root: {},
    wrapper: {},
    subComponentStyles: undefined
  }

};

export const textFieldSearchStyles: ITextFieldStyles = {
  field: { backgroundColor: '#f3f2f1', borderBottomStyle: "solid", borderBottomWidth: 2, borderBottomColor: getTheme().palette.themePrimary},
  root: { backgroundColor: '#f3f2f1'},
  description: {},
  errorMessage: {},
  fieldGroup: {},
  icon: {},
  prefix: {},
  suffix: {},
  wrapper: {},
  subComponentStyles: undefined
};

export const textFieldCheckListItem: ITextFieldStyles = {
  field: {  },
  root: {width:'100%', height:32, marginRight:15, },
  description: {},
  errorMessage: {},

purpleDark: '#32145a',
  purple: '#5c2d91',
  purpleLight: '#b4a0ff',
  blueDark: '#002050',
  blueMid: '#00188f',
  blue: '#0078d4',
  blueLight: '#00bcf2',
  tealDark: '#004b50',
  teal: '#008272',
  tealLight: '#00b294',
  greenDark: '#004b1c',
  green: '#107c10',
  greenLight: '#bad80a'
};

export const defaultTheme: ITheme = getTheme(true);

export const neutralTheme = getNeutralVariant(defaultTheme);
export const softTheme = getSoftVariant(defaultTheme);
export const strongTheme = getStrongVariant(defaultTheme);

export const invertedDefaultTheme: ITheme = createTheme({
  palette: invertedDefaultPalette,
  semanticColors: {
    bodyText: defaultTheme.palette.white,
    bodyBackground: defaultTheme.palette.neutralPrimary
  }
});

export const invertedPrimaryTheme: ITheme = createTheme({
  palette: invertedPrimaryPalette,
  semanticColors: {

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></div>

import * as React from 'react';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { DetailsList, Selection, IColumn, buildColumns, IColumnReorderOptions } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { IDragDropEvents, IDragDropContext } from 'office-ui-fabric-react/lib/utilities/dragdrop/interfaces';
import { createListItems, IExampleItem } from 'office-ui-fabric-react/lib/utilities/exampleData';
import { TextField, ITextFieldStyles } from 'office-ui-fabric-react/lib/TextField';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { getTheme, mergeStyles } from 'office-ui-fabric-react/lib/Styling';

const theme = getTheme();
const margin = '0 30px 20px 0';
const dragEnterClass = mergeStyles({
  backgroundColor: theme.palette.neutralLight
});
const controlWrapperClass = mergeStyles({
  display: 'flex',
  flexWrap: 'wrap'
});
const textFieldStyles: Partial = {
  root: { margin: margin },
  fieldGroup: { maxWidth: '100px' }
};

export interface IDetailsListDragDropExampleState {
  items: IExampleItem[];
  columns: IColumn[];