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

private getClasses() {
    const { className, size, maxWidth } = this.props;
    return join([
      'y-text',
      size ? `y-textSize-${size}` : '',
      maxWidth ? 'y-text__ellipsis' : '',
      className,
      mergeStyles(getStyles(this.props)),
    ]);
  }
}

}
        
      }
      <div>{children}</div>
    
  
);

IconBadge.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  icons: PropTypes.array,
};

const bgYellow = mergeStyles({backgroundColor: statusColorMapping.waiting});
const bgRed = mergeStyles({backgroundColor: statusColorMapping.failed});
const bgBlue = mergeStyles({backgroundColor: statusColorMapping.running});
const bgGreen = mergeStyles({backgroundColor: statusColorMapping.succeeded});
const bgGray = mergeStyles({backgroundColor: statusColorMapping.unknown});

export const SucceededBadge = ({children}) =&gt; (
  
    {children}
  
);

SucceededBadge.propTypes = {
  children: PropTypes.node,
};

isTop: mergeStyles({
      left: 0,
      top: 0,
      width: '100%',
      height: '50%'
    }),

    isBottom: mergeStyles({
      left: 0,
      bottom: 0,
      width: '100%',
      height: '50%'
    }),

    isIn: mergeStyles({
      opacity: 0
    })
  };
}

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',

        ':focus:after': {

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',
      border: '1px solid black',
      backgroundImage:
      'url("data:image/svg+xml;base64,' + 'PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc' +

}

    const itemText = item.text || item.name;
    const rootStyles: IStyle = {
      height: '100%'
    };
    const labelStyles: IStyle = {
      whiteSpace: 'nowrap'
    };
    const commandButtonProps: ICommandBarItemProps = {
      allowDisabledFocus: true,
      role: 'menuitem',
      ...item,
      styles: {
        ...item.buttonStyles,
        root: item.buttonStyles ? mergeStyles(rootStyles, item.buttonStyles.root) : rootStyles,
        label: item.buttonStyles ? mergeStyles(labelStyles, item.buttonStyles.label) : labelStyles
      },
      className: css('ms-CommandBarItem-link', item.className),
      text: !item.iconOnly ? itemText : undefined,
      menuProps: item.subMenuProps,
      onClick: this._onButtonClick(item)
    };

    if (item.iconOnly && itemText !== undefined) {
      return (
        
          {this._commandButton(item, commandButtonProps)}
        
      );
    }

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'
      })
  };
}

function _constructFinalProps(defaultStyles: IStyle, ...allProps: (TProps | undefined)[]): TProps {
  const finalProps: TProps = {} as any;
  const classNames: (string | undefined)[] = [];

  for (const props of allProps) {
    classNames.push(props && props.className);
    assign(finalProps, ...(props as any));
  }

  finalProps.className = mergeStyles(defaultStyles, classNames);

  return finalProps;
}

export function getStyles(theme: ITheme = getTheme()): IAnimationPageStyles {
  return {
    grid: mergeStyles({
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'stretch',
      margin: '-8px'
    }),

    blue: mergeStyles({
      background: theme.palette.themeSecondary
    }),

    tile: mergeStyles({
      flexGrow: 1,
      minWidth: '200px',
      maxWidth: '400px',
      padding: '8px'
    })