How to use the @uifabric/styling.FontSizes.small function in @uifabric/styling

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)': {
            marginRight: 0
          },
          '&:nth-child(n + 9)': {
            marginBottom: 0
          },
          '& div': {
            fontWeight: FontWeights.regular

}
      }
    ],
    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': {
            color: palette.neutralDark,
            backgroundColor: palette.neutralLight,
            cursor: 'pointer',
            outline: '1px solid transparent'
          }
        }
      }

],
    navigationButtonsContainer: {
      display: 'flex',
      alignItems: 'center'
    },
    navigationButton: [
      getFocusStyle(theme, { inset: -1 }),
      {
        width: 28,
        minWidth: 28,
        height: 28,
        minHeight: 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': {
            color: palette.neutralDark,
            cursor: 'pointer',
            outline: '1px solid transparent',
            backgroundColor: palette.neutralLight
          }
        }
      }

},
    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,
            overflow: 'initial'
          },
          [`.${IsFocusVisibleClassName} .${classNames.root}:focus-within &`]: {
            // edge does not recognize focus-within, so separate it out
            height: 53,
            minHeight: 12,
            overflow: 'initial'
          },
          '&:hover': {
            cursor: 'pointer',
            backgroundColor: palette.neutralLight
          },

],
    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': {
            fontSize: FontSizes.small
          },
          '&:hover': {
            color: palette.themePrimary,
            backgroundColor: 'transparent',
            cursor: 'pointer'
          },
          '&:active': {
            color: palette.themeDark
          },
          '&:disabled': {
            color: palette.neutralTertiaryAlt,
            pointerEvents: 'none'

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': {
            fontSize: FontSizes.small
          },
          '&:hover': {
            color: palette.themePrimary,
            backgroundColor: 'transparent',
            cursor: 'pointer'
          },
          '&:active': {
            color: palette.themeDark
          },
          '&:disabled': {
            color: palette.neutralTertiaryAlt,
            pointerEvents: 'none'
          }
        }
      }
    ],

key={`gpu-${x}`}
                          >{`#${x}`}
                        ))}
                      
                    ),
                  }}
                  directionalHint={DirectionalHint.topLeftEdge}
                >
                  
                    <div>{gpuAttr.length}</div>
                    <div>
                      
                    </div>
                  
                
              
            );
          }
        },
      },

marginTop: 4,
        width: 196,
        position: 'relative',
        paddingBottom: 10
      },
      showWeekNumbers && {
        width: 226
      }
    ],
    dayCell: {
      margin: 0,
      padding: 0,
      width: 28,
      height: 28,
      lineHeight: 28,
      fontSize: FontSizes.small,
      fontWeight: FontWeights.regular,
      color: palette.neutralPrimary,
      cursor: 'pointer',
      selectors: {
        ['&.' + classNames.hoverStyle]: {
          backgroundColor: palette.neutralLighter
        },
        ['&.' + classNames.pressedStyle]: {
          backgroundColor: palette.neutralLight
        }
      }
    },
    daySelected: [
      dateRangeType !== DateRangeType.Month && {
        backgroundColor: palette.neutralLight + '!important',
        selectors: {

}
    ],
    weekRow: rowAnimationStyle,
    weekDayLabelCell: AnimationStyles.fadeIn200,
    weekNumberCell: {
      margin: 0,
      padding: 0,
      borderRight: '1px solid',
      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',