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

headerIsClickable && {
        selectors: {
          '&:hover': {
            cursor: 'pointer',
            background: palette.neutralLight,
            color: palette.black
          }
        }
      }
    ],
    monthComponents: {
      display: 'inline-flex',
      alignSelf: 'flex-end'
    },
    headerIconButton: [
      getFocusStyle(theme, { inset: -1 }),
      {
        width: 28,
        height: 28,
        display: 'block',
        textAlign: 'center',
        lineHeight: 28,
        fontSize: FontSizes.small,
        color: palette.neutralPrimary,
        borderRadius: 2,
        position: 'relative',
        backgroundColor: 'transparent',
        border: 'none',
        padding: 0,
        overflow: 'visible', // explicitly specify for IE11
        selectors: {
          '&:hover': {

}
    ],
    gridContainer: {
      marginTop: 4
    },
    buttonRow: {
      ...animationStyle,
      marginBottom: 16,
      selectors: {
        '&:nth-child(n + 3)': {
          marginBottom: 0
        }
      }
    },
    itemButton: [
      getFocusStyle(theme, { inset: -1 }),
      {
        width: 40,
        height: 40,
        minWidth: 40,
        minHeight: 40,
        lineHeight: 40,
        fontSize: FontSizes.small,
        padding: 0,
        margin: '0 12px 0 0',
        color: palette.neutralPrimary,
        backgroundColor: 'transparent',
        border: 'none',
        borderRadius: 2,
        overflow: 'visible', // explicitly specify for IE11
        selectors: {
          '&:nth-child(4n + 4)': {

borderColor: palette.neutralLight,
      backgroundColor: palette.neutralLighterAlt,
      color: palette.neutralSecondary,
      boxSizing: 'border-box',
      width: 28,
      height: 28,
      fontWeight: FontWeights.regular,
      fontSize: FontSizes.small
    },
    dayOutsideBounds: disabledStyle,
    dayOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth && {
      color: palette.neutralSecondary,
      fontWeight: FontWeights.regular
    },
    dayButton: [
      getFocusStyle(theme, { inset: -2 }),
      {
        width: 24,
        height: 24,
        lineHeight: 24,
        fontSize: FontSizes.small,
        fontWeight: 'inherit',
        borderRadius: 2,
        border: 'none',
        padding: 0,
        color: 'inherit',
        backgroundColor: 'transparent',
        cursor: 'pointer',
        overflow: 'visible', // explicitly specify for IE11
        selectors: {
          span: {
            height: 'inherit',

},
      className
    ],
    divider: {
      top: 0,
      borderRight: '1px solid',
      borderColor: palette.neutralLight
    },
    monthPickerWrapper: [
      {
        display: 'flex',
        flexDirection: 'column'
      }
    ],
    goTodayButton: [
      getFocusStyle(theme, { inset: -1 }),
      {
        bottom: 0,
        color: palette.neutralPrimary,
        height: 30,
        lineHeight: 30,
        backgroundColor: 'transparent',
        border: 'none',
        boxSizing: 'content-box',
        padding: '0 4px',
        alignSelf: 'flex-end',
        marginRight: 16,
        marginTop: 3,
        fontSize: FontSizes.small,
        overflow: 'visible', // explicitly specify for IE11
        selectors: {
          '& div': {

display: 'flex',
        alignItems: 'center',
        flexDirection: 'row'
      },
      className
    ],
    dayButton: {
      borderRadius: '100%'
    },
    dayIsToday: {},
    dayCell: {
      borderRadius: '100%!important'
    },
    daySelected: {},
    navigationIconButton: [
      getFocusStyle(theme, { inset: 0 }),
      {
        width: 12,
        minWidth: 12,
        height: 0,
        overflow: 'hidden',
        padding: 0,
        margin: 0,
        border: 'none',
        display: 'flex',
        alignItems: 'center',
        backgroundColor: palette.neutralLighter,
        fontSize: FontSizes.small,
        selectors: {
          [`.${classNames.root}:hover &, .${IsFocusVisibleClassName} .${classNames.root}:focus &, .${IsFocusVisibleClassName} &:focus`]: {
            height: 53,
            minHeight: 12,

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 }
      }
    }
  ],
  itemImage: {
    flexShrink: 0
  },
  itemContent: {
    marginLeft: 10,