How to use the mjml-core.helpers.merge function in mjml-core

getStyles () {
    const { mjAttribute, defaultUnit } = this.props

    return helpers.merge({}, baseStyles, {
      table: {
        width: mjAttribute('width')
      },
      td: {
        border: mjAttribute('border'),
        borderBottom: mjAttribute('border-bottom'),
        borderLeft: mjAttribute('border-left'),
        borderRadius: defaultUnit(mjAttribute('border-radius'), "px"),
        borderRight: mjAttribute('border-right'),
        borderTop: mjAttribute('border-top'),
        color: mjAttribute('color'),
        cursor: 'auto',
        fontStyle: mjAttribute('font-style'),
        height: mjAttribute('height'),
        padding: defaultUnit(mjAttribute('inner-padding'), "px")
      },

getStyles () {
    const { mjAttribute, defaultUnit, getPadding } = this.props

    return helpers.merge({}, baseStyles, {
      div: {
        textAlign: mjAttribute('align')
      },
      label: {
        textAlign: mjAttribute('ico-align'),
        color: mjAttribute('ico-color'),
        fontSize: defaultUnit(mjAttribute('ico-font-size'), 'px'),
        fontFamily: mjAttribute('ico-font-family'),
        textTransform: mjAttribute('ico-text-transform'),
        textDecoration: mjAttribute('ico-text-decoration'),
        lineHeight: defaultUnit(mjAttribute('ico-line-height'), 'px'),
        paddingTop: getPadding('top', 'ico-'),
        paddingLeft: getPadding('left', 'ico-'),
        paddingRight: getPadding('right', 'ico-'),
        paddingBottom: getPadding('bottom', 'ico-')
      }

getStyles () {
    const { mjAttribute, defaultUnit } = this.props

    const styles = helpers.merge({}, baseStyles, {
      td: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: defaultUnit(mjAttribute('font-size')),
        padding: defaultUnit(mjAttribute('padding')),
        textAlign: mjAttribute('text-align')
      }
    })

    styles.name = helpers.merge({}, styles.td, styles.name)
    styles.quantity = helpers.merge({}, styles.td, styles.quantity)

    return styles
  }

getStyles () {
    const { mjAttribute, getPadding, defaultUnit, parentWidth } = this.props
    const backgroundRatio = this.getBackgroundRatio()
    const backgroundStyle = this.getBackgroundStyle()
    let width = parentWidth

    if (mjAttribute('width')) {
      width = mjAttribute('width')
    }

    return helpers.merge({}, baseStyles, {
      div: {
        maxWidth: defaultUnit(width, 'px')
      },
      edge: {
        paddingBottom: `${backgroundRatio}%`
      },
      hero: {
        background: backgroundStyle,
        paddingTop: getPadding('top'),
        paddingLeft: getPadding('left'),
        paddingRight: getPadding('right'),
        paddingBottom: getPadding('bottom'),
        backgroundPosition: mjAttribute('background-position'),
        verticalAlign: mjAttribute('vertical-align')
      }
    })

getStyles () {
    const { mjAttribute, defaultUnit } = this.props

    const styles = helpers.merge({}, baseStyles, {
      td: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: defaultUnit(mjAttribute('font-size')),
        padding: defaultUnit(mjAttribute('padding')),
        textAlign: mjAttribute('text-align')
      }
    })

    styles.name = helpers.merge({}, styles.td, styles.name)
    styles.quantity = helpers.merge({}, styles.td, styles.quantity)

    return styles
  }

getStyles () {
    const { mjAttribute, defaultUnit } = this.props

    const styles = helpers.merge({}, baseStyles, {
      td: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: defaultUnit(mjAttribute('font-size')),
        padding: defaultUnit(mjAttribute('padding')),
        textAlign: mjAttribute('text-align')
      }
    })

    styles.name = helpers.merge({}, styles.td, styles.name)
    styles.quantity = helpers.merge({}, styles.td, styles.quantity)

    return styles
  }

getStyles () {
    const { mjAttribute, defaultUnit } = this.props

    const styles = helpers.merge({}, baseStyles, {
      table: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: defaultUnit(mjAttribute('font-size'), "px"),
        lineHeight: mjAttribute('line-height')
      },
      th: {
        fontFamily: mjAttribute('font-family'),
        fontSize: defaultUnit(mjAttribute('font-size'), "px"),
        lineHeight: mjAttribute('line-height')
      },
      thead: {
        borderBottom: mjAttribute('border')
      },
      tfoot: {
        borderTop: mjAttribute('border')

getStyles () {
    const { mjAttribute } = this.props

    return helpers.merge({}, baseStyles, {
      a: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: mjAttribute('font-size'),
        fontWeight: mjAttribute('font-weight'),
        lineHeight: mjAttribute('line-height'),
        textDecoration: mjAttribute('text-decoration'),
        textTransform: mjAttribute('text-transform'),
        padding: mjAttribute('padding'),
        paddingTop: mjAttribute('padding-top'),
        paddingLeft: mjAttribute('padding-left'),
        paddingRight: mjAttribute('padding-right'),
        paddingBottom: mjAttribute('padding-bottom')
      }
    })
  }