How to use the linaria.cx function in linaria

if (!link) {
			console.error(idFrom, preparedLink)
			throw new Error('Cannot build a link for a reflection without an Id')
		}

		const { name: linkName, href } = link
		const linkNames = (name || linkName).split('/').filter(Boolean)
		const isPath = linkNames.length > 1

		const relativeHref = normalizePath(settings, href)

		return (
			<a href="{relativeHref}" id="{link.anchor}">
				{typeof this.props.children === 'function'
					? this.props.children(link)
					: this.props.children ||
					  linkNames.map((name, i) =&gt; {
							return (
								<span>
									{name}
									{i !== linkNames.length - 1 ? '/' : ''}
								</span></a>

const Reporter: FunctionComponent = ({ name, mail }) => {
    return <li>
        <span class="name">{ name }</span>
        <span class="{cx(css`">{ mail }</span>
    </li>;
};

export const PrimitiveType = (props: React.HTMLAttributes) => (
	<span>{props.children}</span>
)

render() {
		const { reflection } = this.props
		const sep = reflection.typeKind === TypeKind.Intersection ? '&' : '|'
		const long = reflection.types.length > 3
		return (
			<span>
				{reflection.types.map((type, i) =&gt; {
					return (
						<span>
							{(long || i !== 0) &amp;&amp; <span>{sep}</span>}
							
						</span>
					)
				})}
			</span>
		)
	}
}

({event, store, effect, domain}, tab) => {
    const className = `toolbar ${cx(
      tab === 'events' && 'show-events',
      tab === 'storages' && 'show-storages',
      tab === 'effects' && 'show-effects',
      tab === 'domains' && 'show-domains',
      tab === 'dom' && 'show-dom',
    )}`
    return (
      <ul>
        {event.length &gt; 0 &amp;&amp; (
          <li>
            Events
          </li>
        )}
        {store.length &gt; 0 &amp;&amp; (
          <li>
            Storages</li></ul>

options,
  })

  React.useEffect(() => {
    if (visible) setRender(true)
  }, [visible])

  const onAnimationEnd = (e: React.AnimationEvent) =>
    !visible && e.animationName === `spring-${remove}` && setRender(false)

  return (
    shouldRender && (
      //@ts-ignore
      
        {children}
      
    )
  )
}

{props.strokeTransition && (
            
          )}
        
      )
    );
  }

  return (
    <div>
      <svg viewBox="{`0">{paths}</svg>
      {props.lable &amp;&amp; <span>{props.lable}</span>}
    </div>
  );
}

case 'h1':
      headingStyle = heading1;
      break;
    case 'h2':
      headingStyle = heading2;
      break;
    case 'h3':
      headingStyle = heading3;
      break;
    default:
      headingStyle = heading4;
      break;
  }

  const passedProps = Object.assign({}, props, {
    className: cx(headingStyle, props.className),
  });

  return React.createElement(props.type, passedProps);
}

render() {
		const { icon, header, children, collapsible } = this.props
		return (
			<div>
				<div>{icon}</div>
				<div>{header}</div>
				{children &amp;&amp; <div>{children}</div>}
			</div>
		)
	}
}

if (reflection.tags) {
				const tagObj = reflection.tags.find(t => t.name === tag)
				if (tagObj && tagObj.text) {
					text.push(tagObj.text)
				}
			}
		} else if (reflection.comments) {
			text.push(...reflection.comments.filter(c => c.kind === 'text').map(doc => doc.text))
		}

		if (text.length === 0) {
			return null
		}

		return (
			<div>
				{text.map((text, i) =&gt; {
					return 
				})}
			</div>
		)
	}
}