How to use the react-jss.createUseStyles function in react-jss

* Specified width of component
   */
  width?: string;

  /*
   * Specified height of component
   */
  height?: string;

  /*
   * State of indicator (using ValueState)
   */
  state?: ValueState;
}

const useStyles = createUseStyles>(styles, { name: 'ProgressIndicator' });

const ProgressIndicator: FC = forwardRef(
  (props: ProgressIndicatorPropTypes, ref: Ref) => {
    const { percentValue, displayValue, width, height, className, style, tooltip, state, slot } = props;

    const classes = useStyles();

    // CSS classes
    const wrapperClasses = StyleClassHelper.of(classes.wrapper);
    const progressBarClasses = StyleClassHelper.of(classes.progressbar);
    const progressBarTextClasses = StyleClassHelper.of(classes.progressBarText);

    const progressBarStyle = { flexBasis: `${percentValue}%` };

    // change content density
    const theme = useTheme() as JSSTheme;

import classNames from 'classnames';
import { contentUrl } from '../../shared/util/url_factory';
import { createUseStyles } from 'react-jss';
import { defineMessages, useIntl } from '../../shared/i18n';
import { Link } from 'react-router-dom';
import React, { useRef } from 'react';

const useStyles = createUseStyles({
  thumbLink: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: 'var(--thumb-width)',
    maxWidth: 'var(--thumb-width)',
    minHeight: 'var(--thumb-height)',
  },
  thumb: {
    display: 'inline-block',
    maxWidth: 'var(--thumb-width)',
    maxHeight: 'var(--thumb-height)',
  },
});

const messages = defineMessages({

useState
} from 'react';
import { createPortal } from 'react-dom';
import { createUseStyles, useTheme } from 'react-jss';
import { CommonProps } from '../../interfaces/CommonProps';
import { JSSTheme } from '../../interfaces/JSSTheme';
import { sideNavigationListItemStyles } from './SideNavigationListItem.jss';

export interface SideNavigationListItemProps extends CommonProps {
  icon?: string;
  text: string;
  id: number | string;
  children?: ReactNode | ReactNodeArray;
}

const useStyles = createUseStyles>(
  sideNavigationListItemStyles,
  {
    name: 'SideNavigationListItem'
  }
);
const SideNavigationListItem: FC = forwardRef(
  (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();

import { createUseStyles } from 'react-jss';
import { defineMessages, F, useIntl } from '../../shared/i18n';
import gql from 'graphql-tag';
import Forbidden from '../error/403';
import React, { useContext } from 'react';
import Unauthorized from '../error/401';
import UserContext from '../app/User_Context';
import useDocumentTitle from '../app/title';
import { useQuery } from '@apollo/react-hooks';

const useStyles = createUseStyles({
  container: {
    display: 'flex',
    alignItems: 'flex-start',
    margin: '64px 8px',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    flexFlow: 'wrap',
    alignItems: 'flex-start',
    width: '82%',
    margin: '6px',
    overflowX: 'scroll',
  },
  nav: {
    position: 'sticky',

import axe from 'axe-core';
import Button from '@material-ui/core/Button';
import classNames from 'classnames';
import { createUseStyles } from 'react-jss';
import Popover from '@material-ui/core/Popover';
import React, { useEffect, useState } from 'react';

const useStyles = createUseStyles({
  a11yPopover: {
    padding: '10px',
    maxWidth: '40vw',
    maxHeight: '40vh',
  },

  typeFilter: {
    textTransform: 'capitalize',
  },

  a11yViolations: {
    color: 'red',
  },

  rerun: {
    position: 'absolute',

import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react';
import { createUseStyles } from 'react-jss';
import { CommonProps } from '../../interfaces/CommonProps';
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
import { FlexBoxWrap } from '@ui5/webcomponents-react/lib/FlexBoxWrap';
import { styles } from './Flexbox.jss';

const useStyles = createUseStyles(styles, { name: 'FlexBox' });

export interface FlexBoxPropTypes extends CommonProps {
  alignItems?: FlexBoxAlignItems;
  direction?: FlexBoxDirection;
  displayInline?: boolean;
  fitContainer?: boolean;
  height?: CSSProperties['height'];
  justifyContent?: FlexBoxJustifyContent;
  width?: CSSProperties['width'];
  wrap?: FlexBoxWrap;
  children: ReactNode | ReactNodeArray;
}

const FlexBox: FC = forwardRef((props: FlexBoxPropTypes, ref: Ref) => {
  const {
    children,

import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { LoaderStyles } from './Loader.jss';

const useStyles = createUseStyles(LoaderStyles, { name: 'Loader' });

const Loader = React.forwardRef((props, ref: React.RefObject) => {
  const classes = useStyles();
  return (
    <div>
      Loading...
    </div>
  );
});

export { Loader };

import Checkbox from '@material-ui/core/Checkbox';
import Cookies from 'js-cookie';
import { createUseStyles } from 'react-jss';
import { defineMessages, F, useIntl } from '../../shared/i18n';
import gql from 'graphql-tag';
import HelpOutlineRoundedIcon from '@material-ui/icons/HelpOutlineRounded';
import IconButton from '@material-ui/core/IconButton';
import { List, ListItem, ListItemText } from '@material-ui/core';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import React, { useEffect, useState } from 'react';
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
import { useQuery } from '@apollo/react-hooks';

const useStyles = createUseStyles({
  helpContainer: {
    display: 'inline-block',
  },
});

const messages = defineMessages({
  help: { msg: 'Help' },
});

const EXPERIMENTS_QUERY = gql`
  {
    experiments @client {
      name
    }
  }
`;

renderHeaderContent?: () => JSX.Element;
  children?: ReactNode | ReactNodeArray;
  mode?: ObjectPageMode;
  selectedSectionId?: string;
  selectedSubSectionId?: string;
  onSelectedSectionChanged?: (event: Event) => void;
  showHideHeaderButton?: boolean;
  alwaysShowContentHeader?: boolean;
  noHeader?: boolean;
  showTitleInHeaderContent?: boolean;
  scrollerRef?: RefObject;
  renderBreadcrumbs?: () => JSX.Element;
  renderKeyInfos?: () => JSX.Element;
}

const useStyles = createUseStyles>(styles, { name: 'ObjectPage' });
const defaultScrollbarWidth = 12;

const findSectionIndexById = (sections, id) => {
  const index = Children.toArray(sections).findIndex(
    (objectPageSection: ReactElement) => objectPageSection.props.id === id
  );
  if (index === -1) {
    return 0;
  }
  return index;
};

const positionRelativStyle: CSSProperties = { position: 'relative' };

const ObjectPage: FC = forwardRef((props: ObjectPagePropTypes, ref: RefObject) => {
  const {

import React from "react";
import { Link } from "react-router-dom";
import { createUseStyles } from "react-jss";
import clsx from 'clsx';

const useStyles = createUseStyles({
    root: {
        display: 'flex',
        minHeight: '80px'
    },
    col: {
        flex: '1',
        display: 'flex',
        justifyContent: 'center',
        textAlign: 'center',
        alignItems: 'center',
        position: 'relative'
    },
    leftCol: {
        backgroundColor: '#a7c539'
    },
    rightCol: {