How to use the @material-ui/core/styles.useTheme function in @material-ui/core

export const KatibDialog: React.FunctionComponent = props => {
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [pipelineParameters, setPipelineParameters] = React.useState([]);
  const [pipelineMetrics, setPipelineMetrics] = React.useState([]);

  const theme = useTheme();

  React.useEffect(() => {
    // this is called when `open` changes value.
    // We are interested in the case when `open` becomes true.
    if (props.open) {
      // send RPC to retrieve current pipeline parameters and
      // update the state
      onKatibShowPanel();
    }
  }, [props.open]);

  const onKatibShowPanel = async () => {
    // Send an RPC to Kale to get the pipeline parameters
    // that are currently defined in the notebook
    const nbFilePath = props.activeNotebook.context.path;
    const args = { source_notebook_path: nbFilePath };

export default function AppSearch() {
  const classes = useStyles();
  const inputRef = React.useRef(null);
  const theme = useTheme();
  const userLanguage = useSelector(state => state.options.userLanguage);

  React.useEffect(() => {
    const styleNode = loadCSS(
      'https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css',
      document.querySelector('#app-search'),
    );

    return () => {
      styleNode.parentElement.removeChild(styleNode);
    };
  }, []);

  React.useEffect(() => {
    const handleKeyDown = event => {
      // Use event.keyCode to support IE 11

const DecisionUndoBar = (props) => {
  const theme = useTheme();
  const classes = useStyles(theme);

    const handleClose = (event, reason) => {
      props.close()
    };
  
    const handleUndo = (event, reason) => {
       props.undo()
    };

    let anchorOrigin = {
      vertical: 'bottom',
      horizontal: 'left',
    }

    return (

function Home() {
  const theme = useTheme();
  const classes = useStyles(theme);

  return (
    <section>
      <h1>Next Shopify Storefront</h1>
      <p>
        A Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ...
        and Material UI.
      </p>
      <button color="primary"> utilities.link({ path: '/products' })}
      &gt;
        Browse Products</button></section>

const SharedSidebar = ({
  children,
  PaperProps,
  SlideProps,
  ModalProps,
  useSidebarConfig,
  ...props
}) => {
  const { iBody } = useWindow();
  const theme = useTheme();
  const parsedCtx = useSidebarConfig();
  const height = useHeightAdjustment(parsedCtx);
  useAutoCollapse(parsedCtx);
  const [entered, setEntered] = React.useState(false);
  const styles = useSidebarStyles();
  const transition = useTransitionStyles();
  const { sidebar, opened, setOpened, getSidebarZIndex } = parsedCtx;
  const { getWidth } = createEdgeSidebar(parsedCtx);
  const isPermanent = sidebar.variant === 'permanent';
  return (
     {
        setOpened(false);
      }}

paddingRight: 24
        }
      },
      listItemIcon: {
        color: "white"
      },
      open: {
        backgroundColor: "#282c36",
        "&:hover": {
          backgroundColor: "#282c36"
        }
      }
    };
  });

  const theme = useTheme();
  const classes = useStyles(theme);
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <>

export default function ConfirmationDialog({ openDialog, handleCloseDialog, dialogType }) {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));

  if (!dialogType) return null;
  return (
    <div>
      <dialog aria-labelledby="responsive-dialog-title" open="{openDialog}">
        
          {mapTypeToDialogContent[dialogType].title}
        
        
          </dialog></div>

const PersistentDrawerLeft = props => {
  const classes = useStyles()
  const theme = useTheme()
  const [open, setOpen] = React.useState(false)

  const ToolbarWrapper = withRouter(({ history }) =>
    history.location.pathname.match(/login/) ? null : (

export default function ResponsiveDrawer(props: ResponsiveDrawerProps) {
  const { container } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const drawer = (
    <div>
      <div>
      
      
        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) =&gt; (
          
            {index % 2 === 0 ?  : }
            
          </div></div>

function SwipeableTextMobileStepper() {
  const classes = useStyles();
  const theme = useTheme();
  const [activeStep, setActiveStep] = React.useState(0);
  const maxSteps = tutorialSteps.length;

  const handleNext = () => {
    setActiveStep(prevActiveStep => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep(prevActiveStep => prevActiveStep - 1);
  };

  const handleStepChange = step => {
    setActiveStep(step);
  };

  return (