[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.

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.

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

// contents


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.