隐藏菜单图标仅适用于桌面的材料UI的Appbar按钮

Question

<AppBar title="My AppBar" showMenuIconButton={false} />

这会在所有设备中隐藏菜单图标。

我只需要在桌面中隐藏。

我如何实现这一目标？

Answer 1

您可以试试这个-

showMenuIconButton={window.screen.width.<600? true:false}

其中600是600像素。

Answer 2

您可以订阅调整大小的事件侦听器：

import React, { useState, useEffect } from 'react'

const Events = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)

  useEffect(() => {
    function handleResize() {
      setWindowWidth(window.innerWidth)
    }

    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <div>
     <AppBar title="My AppBar" showMenuIconButton={windowWidth < 600} />
    </div>
  )