材料UI的文檔說明

當靠近屏幕邊緣時，基本菜單會垂直重新排列，以確保所有菜單項都完全可見。

這種行為對于我正在編寫的響應頁面來說非常不方便，因為有很多項目的菜單會在菜單按鈕上彈出，盡管它被固定在底部。

固定的邊距/距離不是一個解決方案，因為菜單按鈕的位置可能會在較小的屏幕上垂直變化。

如何超越或“關閉”這種行為？

不幸的是，我不能在網上分享我的代碼，但是Mui文檔的沙箱可以很容易地修改來說明我的觀點。

下面是我說的行為的兩張截圖。

而在更小的屏幕上，這種情況就會發生。

您可以更改錨點位置以在右側顯示菜單。這樣，按鈕將始終可見。把這個加到菜單道具里。

anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}

你可以在這里確認位置

另一個選項是使用sx prop根據屏幕分辨率設置最小高度。

sx={{maxHeight: {xs:250, md:500}}}

我想知道在菜單上設置最大高度是否對你有用？這是一個不太復雜的解決方案。你甚至可以使用calc

sx= {{ maxHeight: 100 }}
sx= {{ maxHeight: "calc(100% - 40px)" }}

運籌學

PaperProps= {{ sx: { maxHeight: 100 } }}
PaperProps= {{ sx: { maxHeight: "calc(100% - 40px)" } }}