How to use @fluentui/react - 10 common examples

const decorator = content => {content}
// const decorator = content => content;

ctItemBorderColorFocus: siteVars.colorScheme.default.borderFocus,
      ctItemColor: siteVars.colorScheme.default.foreground,
      ctItemColorFocus: siteVars.colorScheme.default.foregroundFocus,
      ctItemColorHover: siteVars.colorScheme.default.foregroundHover,

      ctItemActiveBackground: siteVars.colorScheme.default.backgroundActive1,
      // FIXME: use variables for colors!
      ctItemActiveBackgroundOverlay:
        'linear-gradient(90deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(135deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 70%),linear-gradient(180deg,rgba(60,62,93,.6) 70%,rgba(60,62,93,0) 94%),linear-gradient(225deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 73%),linear-gradient(270deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(0deg,rgba(98,100,167,.75) 6%,rgba(98,100,167,0) 70%)',
      ctItemActiveColor: siteVars.colorScheme.default.foregroundActive1,

      ctItemDangerBackground: siteVars.colorScheme.red.background2,
      ctItemDangerBackgroundHover: siteVars.colorScheme.red.backgroundHover,
      ctItemDangerColorHover: siteVars.colorScheme.red.foregroundHover,

      ctItemIndicatorPadding: pxToRem(8),

      ctItemNotificationBackgroundColor: siteVars.colors.red[400],
      ctItemNotificationSize: pxToRem(8),

      ctItemPrimaryBackground: siteVars.colorScheme.default.background3,
      ctItemPrimaryBackgroundHover: siteVars.colorScheme.brand.backgroundHover1,
      ctItemPrimaryColorHover: siteVars.colorScheme.brand.foregroundHover1,
    }),
  },

ctItemColorHover: siteVars.colorScheme.default.foregroundHover,

      ctItemActiveBackground: siteVars.colorScheme.default.backgroundActive1,
      // FIXME: use variables for colors!
      ctItemActiveBackgroundOverlay:
        'linear-gradient(90deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(135deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 70%),linear-gradient(180deg,rgba(60,62,93,.6) 70%,rgba(60,62,93,0) 94%),linear-gradient(225deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 73%),linear-gradient(270deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(0deg,rgba(98,100,167,.75) 6%,rgba(98,100,167,0) 70%)',
      ctItemActiveColor: siteVars.colorScheme.default.foregroundActive1,

      ctItemDangerBackground: siteVars.colorScheme.red.background2,
      ctItemDangerBackgroundHover: siteVars.colorScheme.red.backgroundHover,
      ctItemDangerColorHover: siteVars.colorScheme.red.foregroundHover,

      ctItemIndicatorPadding: pxToRem(8),

      ctItemNotificationBackgroundColor: siteVars.colors.red[400],
      ctItemNotificationSize: pxToRem(8),

      ctItemPrimaryBackground: siteVars.colorScheme.default.background3,
      ctItemPrimaryBackgroundHover: siteVars.colorScheme.brand.backgroundHover1,
      ctItemPrimaryColorHover: siteVars.colorScheme.brand.foregroundHover1,
    }),
  },

},
    },
    // Just a showcase of how we can further customize the styles for the buttons...
    // This should only indicate which variables are missing in the Teams theme, like (primaryBorderWidth)
    componentStyles: {
      Button: {
        root: ({ props: p }: { props: ButtonProps }) => ({
          ...(p.primary && {
            border: 0,
          }),
        }),
      },
    },
  }

  return mergeThemes(baseTheme, buttonOverrides)
}

import React from 'react'
import ReactDOM from 'react-dom'
import { Button, Provider, themes } from '@fluentui/react'

ReactDOM.render(
  React.createElement(
    Provider,
    { theme: themes.teams },
    React.createElement(Button, { content: 'Theming' }),
  ),
  document.getElementById('root'),
)

root: ({ props: p, theme: { siteVariables } }) => ({
        [`&.${classNames.threadReplies.trigger}`]: {
          border: 'none',
          justifyContent: 'start',
          marginBottom: pxToRem(1),
          boxShadow: 'none',
          textDecoration: 'none',

          '&:focus': {
            backgroundColor: siteVariables.colorScheme.default.background,
          },

          '&:hover': {
            backgroundColor: siteVariables.colorScheme.default.background,
          },

          '&:active': {
            backgroundColor: siteVariables.colorScheme.default.background,
          },
        },
      }),

[`& .${classNames.threadedMessage.innerContent}`]: {
            padding: `${pxToRem(8)} ${pxToRem(16)}`,
          },
          [`& .${classNames.threadedMessage.author}`]: {
            padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
          },
          [`& .${classNames.threadedMessage.timestamp}`]: {
            padding: pxToRem(5),
            color: siteVariables.colorScheme.default.foreground2,
          },
        },
        [`&.${classNames.threadReplies.message}`]: {
          width: '100%',
          minWidth: '100%',
          margin: `${pxToRem(1)} 0`,
          paddingLeft: pxToRem(60),
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
        [`&.${classNames.replyEditor}`]: {
          width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          backgroundColor: siteVariables.colorScheme.default.background2,
        },
      }),
    },

root: ({ props: p, theme: { siteVariables } }) => ({
        [`&.${classNames.threadedMessage.thread}`]: {
          padding: 0,
          width: '100%',
        },
        [`&.${classNames.threadedMessage.threadBody}`]: {
          width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          borderBottom: `${pxToRem(1)} solid ${siteVariables.colorScheme.default.background2}`,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,

          [`& .${classNames.threadedMessage.innerContent}`]: {
            padding: `${pxToRem(8)} ${pxToRem(16)}`,
          },
          [`& .${classNames.threadedMessage.author}`]: {
            padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
          },
          [`& .${classNames.threadedMessage.timestamp}`]: {
            padding: pxToRem(5),
            color: siteVariables.colorScheme.default.foreground2,
          },
        },
        [`&.${classNames.threadReplies.message}`]: {
          width: '100%',

width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          borderBottom: `${pxToRem(1)} solid ${siteVariables.colorScheme.default.background2}`,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,

          [`& .${classNames.threadedMessage.innerContent}`]: {
            padding: `${pxToRem(8)} ${pxToRem(16)}`,
          },
          [`& .${classNames.threadedMessage.author}`]: {
            padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
          },
          [`& .${classNames.threadedMessage.timestamp}`]: {
            padding: pxToRem(5),
            color: siteVariables.colorScheme.default.foreground2,
          },
        },
        [`&.${classNames.threadReplies.message}`]: {
          width: '100%',
          minWidth: '100%',
          margin: `${pxToRem(1)} 0`,
          paddingLeft: pxToRem(60),
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
        [`&.${classNames.replyEditor}`]: {
          width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          backgroundColor: siteVariables.colorScheme.default.background2,

root: ({ props: p, theme: { siteVariables } }) => ({
        [`& .${ChatItem.slotClassNames.message}`]: {
          width: '100%',
        },
        [`&.${classNames.threadReplies.chatItem}`]: {
          padding: 0,
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
        [`& .${classNames.threadReplies.chatItemMessage}`]: {
          margin: 0,
        },
        [`& .${classNames.threadReplies.gutter}`]: {
          left: pxToRem(15),
          zIndex: '1',
        },
      }),
    },