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

const WithStyles: WithStylesComponent = React.forwardRef((props: T, ref: RefObject) => {
      const classes = useStyles(props);
      const theme = useTheme();

      const consolidatedRef = useConsolidatedRef(ref);

      return ;
    });

(props: MicroBarChartPropTypes, ref: Ref) => {
    const { className, dataset, colors, maxWidth, visibleDatasetCount, valueFormatter, labelFormatter, style } = props;
    const classes = useStyles();
    const theme: any = useTheme();
    const visibleDatasetArray = visibleDatasetCount ? dataset.slice(0, visibleDatasetCount) : dataset;

    const colorPalette = resolveColors(colors, theme.theme);

    const maxValue = Math.max(...dataset.map((item) => item.value));

    return (
      <div style="{{">
        {visibleDatasetArray.map((item, index) =&gt; {
          return (
            <div>
              <div>
                <span>{labelFormatter(item.label)}</span>
                </div></div></div>

onSelectedSectionChanged,
    selectedSectionId,
    noHeader,
    alwaysShowContentHeader,
    showTitleInHeaderContent,
    scrollerRef,
    renderBreadcrumbs,
    renderKeyInfos
  } = props;

  const [selectedSectionIndex, setSelectedSectionIndex] = useState(findSectionIndexById(children, selectedSectionId));
  const [selectedSubSectionId, setSelectedSubSectionId] = useState(props.selectedSubSectionId);
  const [expandHeaderActive, setExpandHeaderActive] = useState(false);
  const [isMounted, setIsMounted] = useState(false);
  const [collapsedHeader, setCollapsedHeader] = useState(renderHeaderContentProp === null);
  const theme = useTheme();

  const objectPage: RefObject = useConsolidatedRef(ref);
  const fillerDivDomRef: RefObject = useRef();
  const scrollBar: RefObject = useRef();
  const contentContainer: RefObject = useRef();
  const topHeader: RefObject = useRef();
  const innerHeader: RefObject = useRef();
  const innerScrollBar: RefObject = useRef();
  const contentScrollContainer: RefObject = useRef();
  const collapsedHeaderFiller: RefObject = useRef();
  const lastScrolledContainer = useRef();
  const hideHeaderButtonPressed = useRef(false);
  const stableContentOnScrollRef = useRef(null);
  const stableBarOnScrollRef = useRef(null);
  const scroller = useConsolidatedRef(scrollerRef);
  const [scrollbarWidth, setScrollbarWidth] = useState(defaultScrollbarWidth);

const {
    labels,
    datasets,
    options,
    categoryAxisFormatter,
    valueAxisFormatter,
    getDatasetAtEvent,
    getElementAtEvent,
    colors,
    width,
    height,
    noLegend,
    legendRef
  } = props as BarChartPropTypes & InternalProps;

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme);

  const chartRef = useConsolidatedRef(ref);

  const barChartDefaultConfig = useMemo(() => {
    return {
      scales: {
        xAxes: [
          {
            ...DEFAULT_OPTIONS.scales.yAxes[0],
            ticks: {
              callback: formatAxisCallback(valueAxisFormatter)
            }
          }
        ],
        yAxes: [

},
      tooltips: {
        callbacks: {
          label: formatTooltipLabel(categoryAxisFormatter, valueAxisFormatter)
        }
      },
      plugins: {
        datalabels: {
          formatter: formatDataLabel(valueAxisFormatter)
        }
      }
    };
  }, [categoryAxisFormatter, valueAxisFormatter]);
  const chartOptions = useMergedConfig(lineChartDefaultConfig, options);

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme);

  const chartRef = useConsolidatedRef(ref);
  const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);

  return (

const {
    labels,
    datasets,
    colors,
    categoryAxisFormatter,
    getDatasetAtEvent,
    getElementAtEvent,
    valueAxisFormatter,
    options,
    width,
    height,
    noLegend,
    legendRef
  } = props as PieChartPropTypes & InternalProps;

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme, true);

  const pieChartDefaultConfig = useMemo(() => {
    return {
      tooltips: {
        callbacks: {
          label: formatTooltipLabelForPieCharts(categoryAxisFormatter, valueAxisFormatter)
        }
      },
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          color: getCssVariableValue('--sapUiBaseText', '#32363a'),
          formatter: (val, context) => {
            return valueAxisFormatter(val, context.dataset, context);

const {
    labels,
    datasets,
    categoryAxisFormatter,
    valueAxisFormatter,
    getDatasetAtEvent,
    getElementAtEvent,
    colors,
    options,
    width,
    height,
    noLegend,
    legendRef
  } = props as ColumnChartPropTypes & InternalProps;

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme);

  const chartRef = useConsolidatedRef(ref);

  const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);

  const columnChartDefaultConfig = useMemo(() => {
    return {
      scales: {
        xAxes: [
          {
            ...DEFAULT_OPTIONS.scales.xAxes[0],
            ticks: {
              callback: formatAxisCallback(categoryAxisFormatter)
            }

const {
    labels,
    datasets,
    width,
    height,
    options,
    categoryAxisFormatter,
    getDatasetAtEvent,
    getElementAtEvent,
    valueAxisFormatter,
    colors,
    noLegend,
    legendRef
  } = props as RadarChartPropTypes & InternalProps;

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme);

  const radarChartDefaultConfig = useMemo(() => {
    return {
      scale: {
        ticks: {
          callback: formatAxisCallback(valueAxisFormatter)
        }
      },
      tooltips: {
        callbacks: {
          label: formatTooltipLabel(categoryAxisFormatter, valueAxisFormatter)
        }
      },
      plugins: {
        datalabels: false

const {
    labels,
    datasets,
    colors,
    categoryAxisFormatter,
    getDatasetAtEvent,
    getElementAtEvent,
    valueAxisFormatter,
    options,
    width,
    height,
    noLegend,
    legendRef
  } = props as DonutChartPropTypes & InternalProps;

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme, true);

  const donutChartDefaultConfig = useMemo(() => {
    return {
      cutoutPercentage: 70,
      tooltips: {
        callbacks: {
          label: formatTooltipLabelForPieCharts(categoryAxisFormatter, valueAxisFormatter)
        }
      },
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          color: getCssVariableValue('--sapUiBaseText', '#32363a'),
          formatter: formatDataLabel(valueAxisFormatter)