Material UI z-indexエレベーションシステム

Material UI z-indexシステム

Material UI（MUI）は、Material Designのエレベーション概念に基づくz-indexシステムを使用しています。各コンポーネントタイプには、視覚的な階層を反映する定義済みのz-index値があります。

MUIデフォルトz-index値

// @mui/material/styles/zIndexより
const zIndex = {
  mobileStepper: 1000,
  fab: 1050,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500,
};

Bootstrapとの比較

コンポーネントタイプ	Bootstrap	Material UI
Dropdown	1000	(カスタム)
AppBar/Fixed	1030	1100
Modal Backdrop	1050	1300
Modal	1055	1300
Popover	1070	(カスタム)
Tooltip	1080	1500
Toast/Snackbar	1090	1400

Bootstrapとの主な違い

1. 大きなギャップ：MUIは100ポイントの増分を使用（Bootstrapの10-20に対して）、カスタムレイヤーの余地がより多くあります。
2. FABとSpeedDialが1050を共有：これらのフローティングアクションボタンは同様の視覚的スペースを占めるため同じz-indexです。
3. SnackbarがTooltipの下：MUIではツールチップ（1500）がスナックバー（1400）の上にあります。
4. 全体的に高い値：MUIの範囲（1000-1500）はBootstrapの（1000-1090）より広いです。

MUI z-indexのカスタマイズ

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  zIndex: {
    appBar: 1200,
    drawer: 1100, // drawerをappBarの下に入れ替え
    modal: 1300,
    snackbar: 1400,
    tooltip: 1500,
  },
});