How to use the @uifabric/styling.getTheme function in @uifabric/styling

/** Generates SASS files which list out theme slots and their defaults as SASS variables, used with the legacy version of loadTheme.
 */

const { getTheme } = require('@uifabric/styling');
const fs = require('fs');
const path = require('path');

const defaultTheme = getTheme(true);

const warningMessage =
  '/** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */';

// Font slots
const fonts = defaultTheme.fonts;
const lines = [warningMessage];
let fontSizeTokenName, fontWeightTokenName;
for (const fontName in fonts) {
  const font = fonts[fontName];
  for (const propName in font) {
    const titleCasePropName = propName.charAt(0).toUpperCase() + propName.slice(1);
    const slotName = fontName + titleCasePropName;
    const name = '$ms-font-' + slotName;
    lines.push(`${name}: "[theme:${slotName}, default: ${font[propName]}]";`);

public render(): JSX.Element {
    const theme: ITheme = getTheme();
    const styles: IFontPageRules = getStyles(theme);

    return (
      
        
        
            {
              Object.keys(theme.fonts)
                // tslint:disable:no-any
                .filter((fontName: string) => (theme.fonts as any)[fontName].fontSize !== undefined)
                .map((fontName: string) => (
                  <table>
          <tbody><tr>
                    <td>{ `${fontName}` }</td>
                    <td>{ `${(theme.fonts as any)[fontName].fontSize}` }</td>
                    <td></td></tr></tbody></table>

public render(): JSX.Element {
    const styles: CSSProperties = getStyles(getTheme());
    const name: string = this.props.name;
    const isIn: boolean = name.indexOf('In') >= 0;
    let positioningStyle: CSSProperties;
    const isInStyle: CSSProperties = isIn ? styles.isIn : null;

    if (name.indexOf('Left') >= 0) {
      positioningStyle = isIn ? styles.isRight : styles.isLeft;
    } else if (name.indexOf('Right') >= 0) {
      positioningStyle = isIn ? styles.isLeft : styles.isRight;
    } else if (name.indexOf('Up') >= 0) {
      positioningStyle = isIn ? styles.isBottom : styles.isTop;
    } else {
      positioningStyle = isIn ? styles.isTop : styles.isBottom;
    }

    return (

top: 2,
    right: 2,
    borderRadius: '50%',
    fontSize: 14,
    lineHeight: 14,
    width: 16,
    height: 16,
    display: 'flex',
    justifyContent: 'center',
    userSelect: 'none'
  }],
  activeIcon: [
    'ms-bgColor-white', 'ms-fontColor-neutralDark', 'ms-bgColor-white--hover', {
      selectors: {
        $counter: {
          backgroundColor: getTheme().palette.neutralLight
        }
      }
    }
  ],
  wafflePanelHeader: {
    fontSize: 23,
    width: 32,
    height: 32,
    minWidth: 'none',
    minHeight: 'none',
    marginTop: 4,
    marginLeft: 4
  }
});

export function getStyles(theme: ITheme = getTheme()): IFontPageRules {
  return {
    row: mergeStyles({
      paddingBottom: '10px',
      borderBottom: '1px solid ' + theme.palette.themeLighterAlt,
      userSelect: 'none'
    }),
    cell: mergeStyles(
      theme.fonts.small,
      {
        paddingRight: '20px'
      })
  };
}

export default function TableTextField(props) {
  const {
    onGetErrorMessage,
    styles,
    customPasswordStyle,
    ...otherProps
  } = props;
  const { readOnly, defaultValue } = props;
  const [customErrorMessage, setCustomErrorMessage] = useState();
  const { allUsers } = useContext(Context);
  const theme = getTheme();

  let showError = false;
  if (customErrorMessage && !readOnly) {
    showError = true;
  }

  let textFiedlStyle = styles;
  if (showError) {
    textFiedlStyle = Object.assign(textFiedlStyle, {
      fieldGroup: [
        {
          borderColor: theme.semanticColors.errorText,
        },
      ],
    });
  }

export function getStyles(theme: ITheme = getTheme()): IIconTileStyles {
  return {
    iconTile: mergeStyles(
      theme.fonts.small,
      {
        flexShrink: 0,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        margin: '5px',
        width: 150,
        height: 80,
        opacity: .6,
        cursor: 'default',
        outline: 'none',
        position: 'relative',

export function getStyles(theme: ITheme = getTheme()): IAnimationTileStyles {
  return {

    root: mergeStyles({
      marginBottom: '20px'
    }),

    title: mergeStyles({
      ...theme.fonts.medium,
      marginBottom: '8px'
    }),

    container: mergeStyles({
      overflow: 'hidden',
      position: 'relative',
      maxWidth: '400px',
      height: '100px',

allJobs,
    refreshJobs,
    filteredJobs,
    selectedJobs,
    setSelectedJobs,
    stopJob,
    username,
    filter,
    setFilter,
    ordering,
    setOrdering,
    pagination,
    setPagination,
  };

  const { spacing } = getTheme();

  return (
    
      
        {error && (
          <div>
             setError(null)}
              dismissButtonAriaLabel='Close'
            &gt;
              {error}
            
          </div>
        )}

export interface IListBasicExampleState {
  filterText?: string;
  items?: IExampleItem[];
}

interface IListBasicExampleClassObject {
  itemCell: string;
  itemImage: string;
  itemContent: string;
  itemName: string;
  itemIndex: string;
  chevron: string;
}

const theme: ITheme = getTheme();
const { palette, semanticColors, fonts } = theme;

const classNames: IListBasicExampleClassObject = mergeStyleSets({
  itemCell: [
    getFocusStyle(theme, { inset: -1 }),
    {
      minHeight: 54,
      padding: 10,
      boxSizing: 'border-box',
      borderBottom: `1px solid ${semanticColors.bodyDivider}`,
      display: 'flex',
      selectors: {
        '&:hover': { background: palette.neutralLight }
      }
    }
  ],