How to use the @uifabric/styling.FontWeights.semibold function in @uifabric/styling

width: 196,
        padding: 12,
        boxSizing: 'content-box',
        overflow: 'hidden'
      },
      className
    ],
    headerContainer: {
      display: 'flex'
    },
    currentItemButton: [
      getFocusStyle(theme, { inset: -1 }),
      {
        ...headerAnimationStyle,
        fontSize: FontSizes.medium,
        fontWeight: FontWeights.semibold,
        textAlign: 'left',
        backgroundColor: 'transparent',
        flexGrow: 1,
        padding: '0 4px 0 10px',
        border: 'none',
        overflow: 'visible' // explicitly specify for IE11
      },
      hasHeaderClickCallback && {
        selectors: {
          '&:hover, &:active': {
            cursor: !hasHeaderClickCallback ? 'default' : 'pointer',
            color: palette.neutralDark,
            outline: '1px solid transparent',
            backgroundColor: palette.neutralLight
          }
        }

<br>
                <a rel="noopener noreferrer" href="{sdkOverrides.helpLink}">
                  {sdkOverrides.helpLinkText}
                </a>
              
            )}
          <p></p>
        )}
      

      {props.children}

      {showMetadata &amp;&amp; (
        <div>
          <div style="{{">
            <span style="{{">
              {formatMessage('ID number')}
            </span>
            <span style="{{">{get(formData, '$designer.id')}</span>
          </div>
        </div>
      )}
    
  );
};

<div>
    <div>
      <div>
        <div style="{{">
          Submit a hello-world job
        </div>
        <div style="{{">
          With submitting a hello-world job, this section introduces more
          knowledge about job, so that you can write your own job configuration
          easily.
        </div>
      </div>
      </div></div>

className={c(
        t.w33L,
        t.w100,
        t.mt0L,
        t.mt5,
        t.tc,
        t.flex,
        t.flexColumn,
        t.itemsCenter,
        t.justifyBetween,
      )}
    >
      <div>
        <div style="{{">
          Use VS Code Extension to work with Jobs
        </div>
        <div style="{{">
          OpenPAI Client is a VS Code extension to connect PAI clusters, submit
          AI jobs, and manage files on HDFS, etc. You need to install the
          extension in VS code before using it.
        </div>
      </div>

const designerName = formData && formData.$designer && formData.$designer.name;

    return designerName || dialogName || sdkOverrides.title || title || schema.title || startCase(name);
  };

  const getDescription = (): string => {
    return sdkOverrides.description || description || schema.description || '';
  };

  return (
    <div id="{props.id}">
      <div>
        
        {sdkOverrides.description !== false &amp;&amp; (description || schema.description) &amp;&amp; (
          <p>
            {getDescription()}
            {sdkOverrides.helpLink &amp;&amp; sdkOverrides.helpLinkText &amp;&amp; (
              &lt;&gt;
                <br>
                <br>
                <a rel="noopener noreferrer" href="{sdkOverrides.helpLink}">
                  {sdkOverrides.helpLinkText}
                </a>
              
            )}
          </p>
        )}</div></div>

fontWeight: FontWeights.semibold
            },
            '&:hover': {
              backgroundColor: palette.themePrimary
            }
          }
        }
      : {},
    selected: highlightSelected
      ? {
          color: palette.neutralPrimary,
          backgroundColor: palette.themeLight,
          fontWeight: FontWeights.semibold,
          selectors: {
            '& div': {
              fontWeight: FontWeights.semibold
            },
            '&:hover, &:active': {
              backgroundColor: palette.themeLight
            }
          }
        }
      : {},
    disabled: {
      selectors: {
        '&, &:disabled, & button': {
          color: palette.neutralTertiaryAlt,
          pointerEvents: 'none'
        }
      }
    }
  };

export const LabelStyles = (props: ILabelStyleProps): Partial => {
  const { theme, disabled } = props;
  const { palette } = theme;

  return {
    root: [
      {
        fontWeight: FontWeights.semibold
      },
      disabled && {
        color: palette.neutralTertiary
      }
    ]
  };
};

position: 'relative',
      display: 'inline-flex',
      height: 28,
      lineHeight: 44,
      width: '100%'
    },
    monthAndYear: [
      getFocusStyle(theme, { inset: 1 }),
      {
        ...headerAnimationStyle,
        alignItems: 'center',
        fontSize: FontSizes.medium,
        color: palette.neutralPrimary,
        display: 'inline-block',
        flexGrow: 1,
        fontWeight: FontWeights.semibold,
        padding: '0 4px 0 10px',
        border: 'none',
        backgroundColor: 'transparent',
        borderRadius: 2,
        lineHeight: 28,
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textAlign: 'left',
        textOverflow: 'ellipsis'
      },
      headerIsClickable && {
        selectors: {
          '&:hover': {
            cursor: 'pointer',
            background: palette.neutralLight,
            color: palette.black

border: 'none',
        color: '#333333',
        height: 'auto',
        minHeight: 0,
        minWidth: 0,
        padding: 0,

        selectors: {
          ':hover': {
            color: '#0078D4'
          }
        }
      },
      textContainer: {
        fontSize: 12,
        fontWeight: FontWeights.semibold
      }
    };

    const sectionStackTokens: IStackTokens = { childrenGap: 30 };
    const cardTokens: ICardTokens = { childrenMargin: 12 };
    const footerCardSectionTokens: ICardSectionTokens = { padding: '12px 0px 0px' };
    const backgroundImageCardSectionTokens: ICardSectionTokens = { padding: 12 };
    const agendaCardSectionTokens: ICardSectionTokens = { childrenGap: 0 };
    const attendantsCardSectionTokens: ICardSectionTokens = { childrenGap: 6 };

    return (

public render(): JSX.Element {
    const siteTextStyles: ITextStyles = {
      root: {
        color: '#025F52',
        fontWeight: FontWeights.semibold
      }
    };
    const descriptionTextStyles: ITextStyles = {
      root: {
        color: '#333333',
        fontWeight: FontWeights.semibold
      }
    };
    const helpfulTextStyles: ITextStyles = {
      root: {
        color: '#333333',
        fontWeight: FontWeights.regular
      }
    };
    const iconStyles: IIconStyles = {
      root: {