MUI のモーダルが Ladle の UI にかぶさってくる問題を解決する

MUI のモーダルを表示するStoryを作ってみた。すると、モーダルがLadleのUIにかぶさってしまい、次のStoryに移動できなくなってしまった。

Ladle の Story には iframed というプロパティがあり、これを指定すればこのような問題を回避できるはず、なのだが、これだけでは解決しない。

https://ladle.dev/docs/width/#iframe

const defaults = {
  title: 'pages / mypage / plan / CongratulationsModal',
  msw: [
    ...
  ],
  meta: {
    // not work
    iframed: true,
  },
};

これは当然で、MUI のモーダルは createPortal を使って document.body 直下にモーダルコンポーネントを描画する挙動となっているから。

この挙動は Modal のプロパティ disablePortal を true にすれば防げるので、以下のようにテーマを使い、Ladleの世界ではポータルが使われないように設定した。

components.tsx

const MuiThemeProvider = ({ children }) => {
  return (
    <ThemeProvider
      theme={{
        ...theme,
        components: {
          ...theme.components,
          MuiModal: {
            defaultProps: {
              // モーダルがポータルでレンダリングされるのを防ぐ
              // これにより、モーダルが Ladle の iframe 内に表示される
              disablePortal: true,
            },
          },
        },
      }}
    >
      {children}
    </ThemeProvider>
  );
};

export const Provider: GlobalProvider = ({ children }) => {
  return (
    <NextRouterProvider>
      <MuiThemeProvider>
        {children}
      </MuiThemeProvider>
    </NextRouterProvider>
  );
};

こうすることで、無事に Story が iframe 内に表示されるようになる。