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

const LoginMenu: React.FunctionComponent = props => {
  const [t] = useTranslation();

  const theme = useTheme();

  const MobileButton = ({ openModal }) => (

function useMediaQuery(queryInput, options = {}) {
  const theme = useTheme();
  const { iWindow } = useWindow();

  const props = getThemeProps({
    theme,
    name: 'MuiUseMediaQuery',
    props: {},
  });

  if (process.env.NODE_ENV !== 'production') {
    if (typeof queryInput === 'function' && theme === null) {
      console.error(
        [
          'Material-UI: the `query` argument provided is invalid.',
          'You are providing a function without a theme in the context.',
          'One of the parent elements needs to use a ThemeProvider.',
        ].join('\n')

function TablePaginationActions(props) {
  const classes = useStyles1();
  const theme = useTheme();
  const { count, page, rowsPerPage, onChangePage } = props;

  function handleFirstPageButtonClick(event) {
    onChangePage(event, 0);
  }

  function handleBackButtonClick(event) {
    onChangePage(event, page - 1);
  }

  function handleNextButtonClick(event) {
    onChangePage(event, page + 1);
  }

  function handleLastPageButtonClick(event) {
    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));

const Main = props => {
    const {children} = props;

    const classes = useStyles();
    const theme = useTheme();
    const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
        defaultMatches: true
    });

    const [openSidebar, setOpenSidebar] = useState(false);

    const handleSidebarOpen = () => {
        setOpenSidebar(true);
    };

    const handleSidebarClose = () => {
        setOpenSidebar(false);
    };

    const shouldOpenSidebar = isDesktop ? true : openSidebar;

...other
  } = props;
  const tooltipRef = React.useRef(null);
  const ownRef = useForkRef(tooltipRef, ref);

  const popperRef = React.useRef(null);
  const handlePopperRef = useForkRef(popperRef, popperRefProp);
  const handlePopperRefRef = React.useRef(handlePopperRef);
  useEnhancedEffect(() => {
    handlePopperRefRef.current = handlePopperRef;
  }, [handlePopperRef]);
  React.useImperativeHandle(popperRefProp, () => popperRef.current, []);

  const [exited, setExited] = React.useState(true);

  const theme = useTheme();
  const rtlPlacement = flipPlacement(initialPlacement, theme);
  /**
   * placement initialized from prop but can change during lifetime if modifiers.flip.
   * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
   */
  const [placement, setPlacement] = React.useState(rtlPlacement);

  React.useEffect(() => {
    if (popperRef.current) {
      popperRef.current.update();
    }
  });

  const handleOpen = React.useCallback(() => {
    if (!tooltipRef.current || !anchorEl || !open) {
      return;

function DetailsView(props: DetailsViewProps) {
  const classes = useDetailsStyles();
  const theme = useTheme();
  const { application, group, instance, onInstanceUpdated } = props;
  const [eventHistory, setEventHistory] = React.useState(null);
  const [showEdit, setShowEdit] = React.useState(false);

  const hasAlias = !!instance.alias;

  React.useEffect(() => {
    API.getInstanceStatusHistory(application.id, group.id, instance.id)
      .then(statusHistory => {
        setEventHistory(statusHistory || []);
      })
      .catch(() => {
        setEventHistory([]);
      });
  }, [instance]);

function Badge({ children, colorBrightness, color, ...props }) {
  var classes = useStyles();
  var theme = useTheme();
  var Styled = createStyled({
    badge: {
      backgroundColor: getColor(color, theme, colorBrightness),
    },
  });

  return (
    
      {styledProps => (
        
          {children}

const Header = ({ className, children, style, ...props }) => {
  const ctx = useLayoutCtx();
  const headerModel = createHeader(ctx);
  const allSidebars = createAllSidebars(ctx);
  const styles = useStyles();
  const transition = useTransitionStyles();
  const theme = useTheme();
  return (
    
      {typeof children === 'function' ? children(ctx) : children}
    
  );

export default observer(props => {
  const { tab } = props
  const { showTab } = tab
  const theme = useTheme()
  const { dragStore } = useStore()
  const [dropProps, drop] = useDrop({
    accept: ItemTypes.TAB,
    drop: () => {
      dragStore.drop(tab)
    },
    canDrop: () => tab.win.canDrop,
    collect: monitor => {
      return {
        canDrop: monitor.canDrop(),
        isOver: monitor.isOver({ shallow: true })
      }
    }
  })
  const { isOver, canDrop } = dropProps
  const tabStyle = {}