How to use the @ui5/webcomponents-react-base/lib/StyleClassHelper.StyleClassHelper.of function in @ui5/webcomponents-react-base

children,
    justifyContent,
    direction,
    alignItems,
    height,
    width,
    displayInline,
    wrap,
    style,
    className,
    tooltip,
    slot
  } = props;

  const classes = useStyles();
  const flexBoxClasses = StyleClassHelper.of(classes.flexBox);
  // direction
  flexBoxClasses.put(classes[`flexBoxDirection${direction}`]);
  // justify content
  flexBoxClasses.put(classes[`justifyContent${justifyContent}`]);
  // align items
  flexBoxClasses.put(classes[`alignItems${alignItems}`]);
  // wrapping
  flexBoxClasses.put(classes[`flexWrap${wrap}`]);

  if (displayInline) {
    flexBoxClasses.put(classes.flexBoxDisplayInline);
  }

  if (className) {
    flexBoxClasses.put(className);
  }

// @ts-ignore
                  if (child.props.hasOwnProperty(changeEventName)) {
                    // @ts-ignore
                    child.props[changeEventName](event);
                  }
                },
                valueParameter: valueParamName,
                style: { width: '100%' }
              });
            })}
          
        );
    }
  }, [valueParamName, changeEventName, filterItems, loading, type, children]);

  const filterItemClasses = StyleClassHelper.of(classes.filterItem);

  return (
    <div title="{tooltip}" style="{style}">
      <div>
        <label>{label}</label>
        {filterComponent}
      </div>
    </div>
  );
});

const indicatorIcon = useMemo(() => {
      const arrowClasses = StyleClassHelper.of(classes.arrowIndicatorShape);
      switch (arrowIndicator) {
        case DeviationIndicator.Up:
          arrowClasses.put(classes.arrowUp);
          break;
        case DeviationIndicator.Down:
          arrowClasses.put(classes.arrowDown);
          break;
        default:
          arrowClasses.put(classes.arrowRight);
          break;
      }

      switch (indicatorState) {
        case ValueState.Success:
          arrowClasses.put(classes.good);
          break;

(props: SideNavigationListItemProps, ref: Ref) => {
    const { icon, text, id, children, tooltip, slot, className, style } = props;

    const [isExpanded, setExpanded] = useState(false);

    const handleToggleExpand = useCallback(() => {
      setExpanded(!isExpanded);
    }, [isExpanded, setExpanded]);

    const classes = useStyles();
    const theme = useTheme() as JSSTheme;

    const listItemClasses = StyleClassHelper.of(classes.listItem);
    if (theme.contentDensity === ContentDensity.Compact) {
      listItemClasses.put(classes.compact);
    }

    if (className) {
      listItemClasses.put(className);
    }

    if (isExpanded) {
      listItemClasses.put(classes.expanded);
    }

    const noIcons = props['noIcons'];
    if (noIcons) {
      listItemClasses.put(classes.noIcons);
    }

);
    }
    return null;
  }, [showBackButton]);

  const renderTitle = useCallback(() =&gt; <title>{title}</title>, [title]);

  const header = useMemo(() =&gt; {
    if (renderCustomHeader) {
      return renderCustomHeader();
    }

    return ;
  }, [renderCustomHeader, renderTitle, renderBackButton]);

  const pageContainer = StyleClassHelper.of(classes.pageContainer);
  const headerClasses = StyleClassHelper.of(classes.pageHeader, classes.baseBar);
  const footerClasses = StyleClassHelper.of(classes.pageFooter, classes.baseBar);

  if (showHeader) {
    pageContainer.put(classes.pageWithHeader);
  }

  if (showFooter) {
    pageContainer.put(classes.pageWithFooter);
  }

  if (className) {
    pageContainer.put(className);
  }

  pageContainer.put(classes[`background${backgroundDesign}`]);

const Spinner: FC = forwardRef((props: SpinnerProps, ref: RefObject) => {
  const { className, size, tooltip, slot, style, delay } = props;
  const classes = useStyles();
  const [isVisible, setIsVisible] = useState(delay === 0);

  const spinnerClasses = StyleClassHelper.of(classes.spinner);
  if (className) {
    spinnerClasses.put(className);
  }

  spinnerClasses.put(classes[`spinner${size}`]);

  useEffect(() => {
    if (delay > 0) {
      setTimeout(() => {
        setIsVisible(true);
      }, delay);
    }
  }, []);

  if (!isVisible) {
    return null;

arrowClasses.put(classes.critical);
          break;
        default:
          arrowClasses.put(classes.none);

          break;
      }
      return <div>;
    }, [arrowIndicator, indicatorState, classes]);

    const headerClasses = StyleClassHelper.of(classes.cardHeader);
    if (onHeaderPress) {
      headerClasses.put(classes.cardHeaderClickable);
    }

    const valueAndUnitClasses = StyleClassHelper.of(classes.valueAndUnit);
    if (valueState === ValueState.Error) {
      valueAndUnitClasses.put(classes.error);
    }
    if (valueState === ValueState.Warning) {
      valueAndUnitClasses.put(classes.critical);
    }
    if (valueState === ValueState.Success) {
      valueAndUnitClasses.put(classes.good);
    }

    if (className) {
      headerClasses.put(className);
    }
    const shouldRenderContent = [value, unit, deviation, target].some((v) =&gt; v !== null);
    return (
      <div style="{style}" title="{tooltip}"></div></div>

},
    [mode]
  );

  useEffect(() => {
    adjustDummyDivHeight();
    requestAnimationFrame(() => {
      const scrollbarWidth = getScrollBarWidth();
      if (scrollbarWidth && scrollbarWidth !== 0 && scrollbarWidth !== defaultScrollbarWidth) {
        setScrollbarWidth(scrollbarWidth);
      }
    });
    setIsMounted(true);
  }, []);

  const objectPageClasses = StyleClassHelper.of(classes.objectPage);
  if (className) {
    objectPageClasses.put(className);
  }

  if (showTitleInHeaderContent) {
    objectPageClasses.put(classes.titleInHeaderContent);
  }

  const headerClasses = StyleClassHelper.of(classes.header);
  if (alwaysShowContentHeader || expandHeaderActive) {
    headerClasses.put(classes.alwaysVisibleHeader);
  }

  const [scrollBarWidthStyle, scrollBarWidthMargin, scrollBarWidthPadding] = useMemo(() => {
    return [
      { width: `${scrollbarWidth}px` },

const renderGridElements = (child: ReactElement) => {
    const span = getSpanFromString(defaultSpan);
    const indentSpan = getIndentFromString(defaultIndent);

    const gridSpanClasses = StyleClassHelper.of(classes.gridSpan);
    if (child.props['data-layout'] && child.props['data-layout'].span) {
      const childSpan = getSpanFromString(child.props['data-layout'].span);
      gridSpanClasses.put(classes[`gridSpan${childSpan}`]);
    } else {
      gridSpanClasses.put(classes[`gridSpan${span}`]);
    }

    if (child.props['data-layout'] && child.props['data-layout'].indent) {
      const childIndent = getIndentFromString(child.props['data-layout'].indent);
      if (childIndent && childIndent > 0) {
        gridSpanClasses.put(classes[`gridIndent${childIndent}`]);
      }
    } else if (indentSpan && indentSpan > 0) {
      gridSpanClasses.put(classes[`gridIndent${indentSpan}`]);
    }
    return <div>{child}</div>;

}, [showPageIndicator, arrowsPlacement]);

  if (!shouldRenderPaginationBar) {
    return (
      <div>
        <div data-value="paginationArrow">
          
        </div>
        <div data-value="paginationArrow">
          
        </div>
      </div>
    );
  }

  const paginationClasses = StyleClassHelper.of(classes.pagination);
  if (arrowsPlacement === CarouselArrowsPlacement.Content) {
    paginationClasses.put(classes.paginationArrowContent);
  }
  if (pageIndicatorPlacement === PlacementType.Top) {
    paginationClasses.put(classes.paginationTop);
  }
  if (pageIndicatorPlacement === PlacementType.Bottom) {
    paginationClasses.put(classes.paginationBottom);
  }

  return (
    <div>
      <div data-value="paginationArrow">
        
      </div>
</div>