[MUI]Set a background image for the Dialog component.

The MUI’s Dialog component is a convenient component that can display a dialogue with a nice animation just by calling it.

あわせて読みたい

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

In this case, we will set a background image for the MUI’s Dialog component.

Set the background-image on the Dialog component.

Define Dialog components with Styled-components.

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

The MuiPaper-root class is the root element, so set the background image to this class.

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

Dialog class names, such as the MuiPaper-root class, refer to the formula.
The Dialog component is based on the Paper API and therefore refers to this page.

あわせて読みたい

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

You can then display a Dialog with a background image simply by calling it.

<BootstrapDialog>
// contents
</BootstrapDialog>

Summary

Customising MUI is simple and easy to use.

If you look at the DOM in the developer tools, you will see classes that look like them, but it is better to check whether they are described in the official documentation and define them, taking version upgrades into account.