How to use the @uifabric/fluent-theme.NeutralColors.gray30 function in @uifabric/fluent-theme

const getStyles: IStyleFunction = () => {
  return {
    root: {
      ...baseCodeStyle,
      padding: '0 4px',
      border: '1px solid ' + NeutralColors.gray30,
      borderRadius: 3
    }
  };
};

const handleChange = (_e: any, newValue?: string) => {
    setLocalValue(newValue);
    setHasBeenEdited(true);
    onChange(_e, newValue);
  };

  const handleCommit = (e: React.FocusEvent) => {
    setHasFocus(false);
    setEditing(false);
    onBlur && onBlur(e);
  };

  let borderColor: string | undefined = undefined;

  if (!editing) {
    borderColor = localValue ? 'transparent' : NeutralColors.gray30;
  }

  return (
    <div> setEditing(true)} onMouseLeave={() =&gt; !hasFocus &amp;&amp; setEditing(false)}&gt;
      </div>

fontSize: fontSize,
              selectors: {
                '::placeholder': {
                  fontSize: fontSize,
                },
              },
            },
            styleOverrides.field
          ),
          fieldGroup: mergeStyles(
            {
              borderColor,
              transition: 'border-color 0.1s linear',
              selectors: {
                ':hover': {
                  borderColor: hasFocus ? undefined : NeutralColors.gray30,
                },
              },
            },
            styleOverrides.fieldGroup
          ),
        }}
        onBlur={handleCommit}
        onFocus={() => setHasFocus(true)}
        onChange={handleChange}
        autoComplete="off"
        {...rest}
      />
    
  );
};

flex: 1;
`;

export const arrayItemDefault = css`
  font-size: 14px;
`;

export const field = css`
  margin: 10px 0;
`;

export const customObjectFieldContainer = css`
  display: flex;

  &:not(:last-child) {
    border-bottom: 1px solid ${NeutralColors.gray30};
  }
`;

export const customObjectFieldItem = css`
  flex: 1;

  & + & {
    margin-left: 20px;
  }
`;

export const customObjectFieldLabel = css`
  color: ${NeutralColors.gray130};
  font-size: 12px;
  margin-left: 7px;
  padding-bottom: 5px;

import { css } from '@emotion/core';
import { NeutralColors } from '@uifabric/fluent-theme';

export const headerSub = css`
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid ${NeutralColors.gray30};
`;

export const leftActions = css`
  position: relative;
  height: 44px;
`;

export const rightActions = css`
  position: relative;
  height: 44px;
  margin-right: 20px;
`;

export const actionButton = css`
  font-size: 16px;
  margin-top: 2px;