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

export const CardStyles: ICardComponent['styles'] = (props, theme, tokens): ICardStylesReturnType => {
  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  return {
    root: [
      classNames.root,
      {
        borderRadius: '2px',
        boxShadow: tokens.boxShadow,
        cursor: tokens.cursor,
        height: tokens.height,
        width: tokens.width,
        minWidth: tokens.minWidth,
        maxWidth: tokens.maxWidth,
        transition: 'box-shadow 0.5s ease',

        selectors: {
          ':hover': {

export const CardSectionStyles: ICardSectionComponent['styles'] = (props, theme, tokens): ICardSectionStylesReturnType => {
  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  return {
    root: [
      theme.fonts.large,
      classNames.root,
      {
        margin: tokens.margin,
        padding: tokens.padding
      }
    ]
  };
};

export const CardItemStyles: ICardItemComponent['styles'] = (props, theme): ICardItemStylesReturnType => {
  const { disableChildPadding } = props;

  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  return {
    root: [
      theme.fonts.medium,
      classNames.root,
      {
        width: 'auto',
        height: 'auto'
      },
      disableChildPadding && {
        marginLeft: -12,
        marginRight: -13
      }
    ]
  };
};

export const CardItemStyles: ICardItemComponent['styles'] = (props, theme, tokens): ICardItemStylesReturnType => {
  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  return {
    root: [
      theme.fonts.large,
      classNames.root,
      {
        margin: tokens.margin,
        padding: tokens.padding
      }
    ]
  };
};

export const styles = (props: IDatePickerStyleProps): IDatePickerStyles => {
  const { className, theme, disabled, label, isDatePickerShown } = props;
  const { palette, semanticColors } = theme;
  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  const DatePickerIcon: IStyle = {
    color: palette.neutralSecondary,
    fontSize: FontSizes.icon,
    lineHeight: '18px',
    pointerEvents: 'none',
    position: 'absolute',
    right: '4px',
    padding: '5px'
  };

  return {
    root: [classNames.root, theme.fonts.large, isDatePickerShown && 'is-open', normalize, className],
    textField: [
      {
        position: 'relative',

export const styles = (props: ICalendarDayGridStyleProps): ICalendarDayGridStyles => {
  const { theme, dateRangeType, showWeekNumbers, lightenDaysOutsideNavigatedMonth, animateBackwards, animationDirection } = props;
  const { palette } = theme;

  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  let rowAnimationStyle: IRawStyle = {};
  if (animateBackwards !== undefined) {
    if (animationDirection === AnimationDirection.Horizontal) {
      rowAnimationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;
    } else {
      rowAnimationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;
    }
  }

  let firstTransitionRowAnimationStyle: IRawStyle = {};
  let lastTransitionRowAnimationStyle: IRawStyle = {};
  if (animateBackwards !== undefined) {
    if (animationDirection !== AnimationDirection.Horizontal) {
      firstTransitionRowAnimationStyle = animateBackwards ? { animationName: '' } : AnimationStyles.slideUpOut20;
      lastTransitionRowAnimationStyle = animateBackwards ? AnimationStyles.slideDownOut20 : { animationName: '' };

export const styles = (props: IWeeklyDayPickerStyleProps): IWeeklyDayPickerStyles => {
  const { className, theme } = props;
  const { palette } = theme;

  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  return {
    root: [
      classNames.root,
      normalize,
      {
        width: 220,
        padding: 12,
        boxSizing: 'content-box',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'row'
      },
      className
    ],
    dayButton: {