How to use the substyle.defaultStyle function in substyle

/**
 * Returns the computed length property value for the provided element.
 * Note: According to spec and testing, can count on length values coming back in pixels. See https://developer.mozilla.org/en-US/docs/Web/CSS/used_value#Difference_from_computed_value
 */
const getComputedStyleLengthProp = (forElement, propertyName) => {
  const length = parseFloat(
    window.getComputedStyle(forElement, null).getPropertyValue(propertyName)
  )
  return isFinite(length) ? length : 0
}

const isMobileSafari =
  typeof navigator !== 'undefined' &&
  /iPhone|iPad|iPod/i.test(navigator.userAgent)

const styled = defaultStyle(
  {
    position: 'relative',
    overflowY: 'visible',

    input: {
      display: 'block',
      position: 'absolute',
      top: 0,
      left: 0,
      boxSizing: 'border-box',
      backgroundColor: 'transparent',
      width: 'inherit',
      fontFamily: 'inherit',
      fontSize: 'inherit',
      letterSpacing: 'inherit',
    },

if (i === -1) {
      return <span>{display}</span>
    }

    return (
      <span>
        {display.substring(0, i)}
        <b>{display.substring(i, i + query.length)}</b>
        {display.substring(i + query.length)}
      </span>
    )
  }
}

const styled = defaultStyle(
  {
    cursor: 'pointer',
  },
  props =&gt; ({ '&amp;focused': props.focused })
)

export default styled(Suggestion)

type PropsT = {
  style: Substyle,
}

function ExampleComponent({ style }: PropsT) {
  return (
    <div>
      <h1>Title</h1>

      <div>Some text...</div>
    </div>
  )
}

const enhance = defaultStyle({
  title: {
    fontSize: 20,
  },
})

export default enhance(ExampleComponent)

renderHighlighterCaret(children) {
    return (
      <span> {
          this.caretRef = el
        }}
        key="caret"
      &gt;
        {children}
      </span>
    )
  }
}

const styled = defaultStyle(
  {
    position: 'relative',
    width: 'inherit',
    color: 'transparent',

    overflow: 'hidden',

    whiteSpace: 'pre-wrap',
    wordWrap: 'break-word',

    '&amp;singleLine': {
      whiteSpace: 'pre',
      wordWrap: null,
    },

    substring: {

return 
  }

  handleMouseEnter(index, ev) {
    if (this.props.onMouseEnter) {
      this.props.onMouseEnter(index)
    }
  }

  select(suggestion, queryInfo) {
    this.props.onSelect(suggestion, queryInfo)
  }
}

const styled = defaultStyle(({ position }) => ({
  position: 'absolute',
  zIndex: 1,
  backgroundColor: 'white',
  marginTop: 14,
  minWidth: 100,
  ...position,

  list: {
    margin: 0,
    padding: 0,
    listStyleType: 'none',
  },
}))

export default styled(SuggestionsOverlay)

import React, { PropTypes } from 'react';
import { defaultStyle } from 'substyle';

const styled = defaultStyle({
  fontWeight: "inherit"
});

const Mention = styled(({ display, style }) => (
  <strong>
    { display }
  </strong>
));

Mention.propTypes = {
  /**
   * Called when a new mention is added in the input
   *
   * Example:
   *
   * ```js