MUI Menu の中身を左右にスクロールして全体を表示する

横幅の小さいデバイスでは、メニューの中身の幅が大きいと画面をはみ出してしまいます。
そこで、中身を左右にスクロールすることで全体を表示できるようにします。

実装

ポイントは Menu コンポーネントのプロパティの以下の2点です。

• slotProps / paper / style / overflowX: auto
• MenuListProps / style / width: max-content

import './App.css';

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

const App = () => {
  return (
    <div className="content">
      <Menu
        open
        sx={{
          width: '10em',
        }}
        slotProps={{
          paper: {
            style: {
              overflowX: 'auto',
            },
          },
        }}
        MenuListProps={{
          style: {
            width: 'max-content',
          },
        }}
      >
        <MenuItem>VERY LONG MENU ITEM 1</MenuItem>
        <MenuItem>VERY LONG MENU ITEM 2</MenuItem>
        <MenuItem>VERY LONG MENU ITEM 3</MenuItem>
      </Menu>
    </div>
  );
};

export default App;

Menu コンポーネントの内部実装は、Popover コンポーネントの中に MenuList コンポーネントが配置されたものです。
Popover コンポーネントの中の Paper に overflow 属性を設定し、Paper の子である MenuList の幅をその内容の MenuItem の幅に合わせることで実現します。

環境

• MUI v6