How to use substyle - 10 common examples

const decorateProps = stylingProps => {
    const decoratedStylingProps = defaultPropsDecorator(stylingProps)
    const { style, className: baseClassName, ...rest } = decoratedStylingProps

    if (!style) {
      return decoratedStylingProps
    }

    const ruleName = hash(style)

    // prepend rule to the sheet if it does not already exist
    const rule =
      sheet.getRule(ruleName) ||
      sheet.addRule(ruleName, mapPseudoSelectors(style), { index: 0 })

    const className = rule.options.classes[ruleName]

    return {

/**
 * 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

const SubstyleJss = ({ classes, sheet, style, className, ...rest }) => {
      return createElement(WrappedComponent, {
        style: createSubstyle(
          {
            style,
            className,
            classNames: classes,
          },
          createPropsDecorator(sheet)
        ),
        ...rest,
      })
    }

export const asDataClasses = style =>
  createSubstyle({ style }, decorateAsClasses)

export const asDataAttributes = style =>
  createSubstyle({ style }, decorateAsDataAttributes)