How to use the @fluentui/react.createComponent function in @fluentui/react

type ColorVariantsProps = {
  name?: string
  themes?: ThemePrepared[]
  headers?: ShorthandCollection
}

export const colorVariantsStyles: ComponentSlotStylesInput = {
  root: {
    border: '1px solid transparent',
    borderRadius: '.25rem',
    overflow: 'hidden',
  },
}

const ColorSchemes = createComponent({
  displayName: 'ColorVariants',
  render: ({ name, themes, headers, stardust: { classes } }) => {
    if (themes.length === 0) return <>

    const colorSchemes = _.map(themes, theme => theme.siteVariables.colorScheme[name])

    const elements = _.flatMap(_.head(colorSchemes), (i, token) => [
      ,

type ColorVariantsProps = {
  name?: string
  themes?: ThemePrepared[]
  headers?: ShorthandCollection
}

export const colorVariantsStyles: ComponentSlotStylesInput = {
  root: {
    border: '1px solid transparent',
    borderRadius: '.25rem',
    overflow: 'hidden',
  },
}

const CategoryColorSchemes = createComponent({
  displayName: 'ColorVariants',
  render: ({ name, themes, headers, stardust: { classes } }) => {
    if (themes.length === 0) return <>

    const colorSchemes = _.map(themes, theme => theme.siteVariables.categoryColorScheme[name])

    const elements = _.flatMap(_.head(colorSchemes), (i, token) => [
      ,

import { CodeSnippet, useKnobValues } from '@fluentui/docs-components'
import { createComponent, Flex } from '@fluentui/react'
import * as _ from 'lodash'
import * as React from 'react'

const knobsSnippetStyles = {
  background: 'whitesmoke',
  color: '#777',
  lineHeight: '1.5',
  padding: `5px 10px`,
}

const KnobsSnippet = createComponent({
  displayName: 'KnobsSnippet',
  render: ({ children, stardust }) => {
    const knobs = useKnobValues()
    const values = _.fromPairs(knobs.map(knob => [knob.name, knob.value]))

    return (
      
        <div>{children}</div>
        
          {({ classes }) =&gt; (

overflow: 'hidden',
    ':after': {
      content: '""',
      position: 'absolute',
      zIndex: 1,
      bottom: 0,
      left: 0,
      pointerEvents: 'none',
      backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%)',
      width: '100%',
      height: '4em',
    },
  },
}

const Fader = createComponent({
  displayName: 'Fader',
  render: ({ children, url, stardust: { classes } }) => {
    return (
      
        <div>{children}</div>
        <button href="{''}">
      
    )
  },
})

export default Fader
</button>

import { createComponent, Icon, Text, Flex } from '@fluentui/react'
import * as React from 'react'

interface LabelledButtonProps {
  iconName: string
  label: string
  onClick?: (event: React.SyntheticEvent) => void
}

const ComponentButton = createComponent({
  displayName: 'ComponentButton',
  render: ({ stardust, ...props }) => {
    const { iconName, label, onClick } = props
    return (
      
        
        
    )
  },
})
export default ComponentButton

}, timeout)
  }, [])

  React.useEffect(() => {
    return () => clearTimeout(timeoutId.current)
  }, [])

  return (
    <>
      {!!notification && }
      {children}
    
  )
}

export const Notification = createComponent({
  displayName: 'Notification',
  render: ({ target, trigger, content, stardust: { classes } }) => {
    const tooltipProps: TooltipProps = {
      content,
      open: true,
      pointing: false,
      target,
      trigger,
    }

    if (target || trigger) {
      return Tooltip.create({ ...tooltipProps, offset: '0 10' })
    }

    return (