How to use the @emotion/utils.getRegisteredStyles function in @emotion/utils

let render = (cache, props, theme: null | Object, ref) => {
  let cssProp = theme === null ? props.css : props.css(theme)

  // so that using `css` from `emotion` and passing the result to the css prop works
  // not passing the registered cache to serializeStyles because it would
  // make certain babel optimisations not possible
  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
    cssProp = cache.registered[cssProp]
  }

  let type = props[typePropName]
  let registeredStyles = [cssProp]
  let className = ''

  if (typeof props.className === 'string') {
    className = getRegisteredStyles(
      cache.registered,
      registeredStyles,
      props.className
    )
  } else if (props.className != null) {
    className = `${props.className} `
  }

  let serialized = serializeStyles(registeredStyles)

  if (
    process.env.NODE_ENV !== 'production' &&
    serialized.name.indexOf('-') === -1
  ) {
    let labelFromStack = props[labelPropName]
    if (labelFromStack) {

render(h, { data, children, parent, injections }) {
        const cache = parent.$emotionCache
        const { as, value, ...restAttrs } = data.attrs || {}

        let className = data.staticClass ? `${data.staticClass} ` : ''
        const finalTag = as || baseTag
        const classInterpolations = []
        const mergedProps = {
          ...data.attrs,
          theme: injections.theme,
          ...parent.$evergarden
        }
        const domProps = { value }

        if (data.class) {
          className += getRegisteredStyles(
            cache.registered,
            classInterpolations,
            clsx(data.class)
          )
        }

        const serialized = serializeStyles(
          styles.concat(classInterpolations),
          cache.registered,
          mergedProps
        )

        insertStyles(
          cache,
          serialized,
          typeof finalTag === 'string'

function merge(registered: Object, css: (*) => string, className: string) {
  const registeredStyles = []
  const rawClassName = getRegisteredStyles(
    registered,
    registeredStyles,
    className
  )

  if (registeredStyles.length < 2) {
    return className
  }
  return rawClassName + css(registeredStyles)
}

function merge(
  registered: Object,
  css: (...args: Array) => string,
  className: string
) {
  const registeredStyles = []

  const rawClassName = getRegisteredStyles(
    registered,
    registeredStyles,
    className
  )

  if (registeredStyles.length < 2) {
    return className
  }
  return rawClassName + css(registeredStyles)
}

let render = (cache, props, theme: null | Object, ref) => {
  let type = props[typePropName]
  let registeredStyles = []

  let className = ''
  if (props.className !== undefined) {
    className = getRegisteredStyles(
      cache.registered,
      registeredStyles,
      props.className
    )
  }
  registeredStyles.push(theme === null ? props.css : props.css(theme))
  const serialized = serializeStyles(cache.registered, registeredStyles)
  const rules = insertStyles(cache, serialized, typeof type === 'string')
  className += `${cache.key}-${serialized.name}`

  const newProps = {}
  for (let key in props) {
    if (
      hasOwnProperty.call(props, key) &&
      key !== 'css' &&
      key !== typePropName

return consume(context => {
    let registeredStyles = []

    let className = ''
    if (props.className !== undefined) {
      className = getRegisteredStyles(
        context.registered,
        registeredStyles,
        props.className
      )
    }
    registeredStyles.push(
      typeof props.css === 'function' ? props.css(context.theme) : props.css
    )
    const serialized = serializeStyles(context.registered, registeredStyles)
    const rules = insertStyles(context, serialized)
    className += `${context.key}-${serialized.name}`

    const newProps = {}
    for (let key in props) {
      if (Object.prototype.hasOwnProperty.call(props, key) && key !== 'css') {
        newProps[key] = props[key]

const Styled = withCSSContext((props, context) => {
      let className = ''
      let classInterpolations = []
      let mergedProps = pickAssign(testAlwaysTrue, {}, props, {
        theme: props.theme || context.theme
      })
      if (typeof props.className === 'string') {
        className += getRegisteredStyles(
          context.registered,
          classInterpolations,
          props.className
        )
      }
      const serialized = serializeStyles.call(
        mergedProps,
        context.registered,
        styles.concat(classInterpolations)
      )
      const rules = insertStyles(context, serialized)
      className += `${context.key}-${serialized.name}`
      if (targetClassName !== undefined) {
        className += ` ${targetClassName}`
      }

{theme => {
              const finalTag = (shouldUseAs && props.as) || baseTag

              let className = ''
              let classInterpolations = []
              let mergedProps = props
              if (props.theme == null) {
                mergedProps = {}
                for (let key in props) {
                  mergedProps[key] = props[key]
                }
                mergedProps.theme = theme
              }

              if (typeof props.className === 'string') {
                className = getRegisteredStyles(
                  context.registered,
                  classInterpolations,
                  props.className
                )
              } else if (props.className != null) {
                className = `${props.className} `
              }

              const serialized = serializeStyles(
                styles.concat(classInterpolations),
                context.registered,
                mergedProps
              )
              const rules = insertStyles(
                context,
                serialized,