[MUI]Dialogコンポーネントに背景画像を設定する。

MUIのDialogコンポーネントは呼び出すだけでいい感じのアニメーションをしながらダイアログが表示できる便利コンポーネントです。

あわせて読みたい

React Dialog component – Material UI Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

今回は、MUIのDialogコンポーネントに背景画像を設定してみます。

Dialogコンポーネントにbackground-imageを設定する

DialogコンポーネントをStyled-componentsで定義します。

const BootstrapDialog = styled(Dialog)(() => ({
// add style
}))

MuiPaper-rootクラスがrootエレメントになるので、このクラスに背景画像を設定します。

const BootstrapDialog = styled(Dialog)(() => ({
  '& .MuiPaper-root': {
    backgroundImage: 'url("/img/bg.png")',
    backgroundSize: '500px'
  }
}))

MuiPaper-rootクラスなどの、Dialogのクラス名は公式を参照します。
Dialogコンポーネントは、Paper APIをベースにしているため、このページを参照しています。

あわせて読みたい

Paper API – Material UI API reference docs for the React Paper component. Learn about the props, CSS, and other APIs of this exported module.

あとは呼び出すだけで背景画像が設定されたDialogが表示できます。

<BootstrapDialog>
// contents
</BootstrapDialog>

Summary

MUIのカスタマイズは簡単で使い回しが良いです。

開発者ツールでDOMをみるとそれっぽいクラスがありますが、公式ドキュメントに記載があるかを確認して定義するようにした方が、バージョンアップなどを考慮すると良さそうです。