Material-ui: [Dialog] Background color issue

[nmaves]

Problem description

I am trying to override the background styles of a dialog. I want to have a dialog with a translucent background. The issue is that there is the element that is using a background color of white in-between the contentStyle and the title/body styles.

Steps to reproduce

<Dialog
                title="Subtitle options"
                modal={false}
                open={this.state.showCaptionStyles}
                onRequestClose={this.handleCaptionClose}
                bodyStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
                contentStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
                titleStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
            >

Versions

• Material-UI: 15.4
• React: 15.3.1
• Browser: All

[nperichSYKES]

The issue is the <Paper /> isn't overridable from the external API.

Dialog.js:

{open &&
            <TransitionItem
              className={contentClassName}
              style={styles.content}
            >
              <Paper zDepth={4}>
                {titleElement}
                <div
                  ref="dialogContent"
                  className={bodyClassName}
                  style={prepareStyles(styles.body)}
                >
                  {children}
                </div>
                {actionsContainer}
              </Paper>
            </TransitionItem>
          }

We definitely don't want to add another field on the API to customize the weird thing between "body" and "content". Perhaps TransitionItem could itself be a Paper?

[nperichSYKES]

A quick solution would be to set the background of this <Paper /> to none, then setting the background of styles.content to white, letting you then control the background with contentStyle.

One issue is that if you then add a borderRadius to contentStyle, it wouldn't be applied to the Paper. So we'd have to also set the Paper's borderRadius to style.content.borderRadius if it is provided.

But, really, we'd probably want to keep Paper's background for theme support?

[jaimehing]

Hello, are there updates about this issue?

[simpixelated]

I'm having a similar issue trying to remove the box-shadow on the dialog. Unfortunately because it uses <Paper> with zDepth hardcoded to 4, I had to override paper.zDepthShadows in the theme. So something that lets us customize this "weird thing" would be very helpful.

[986224568]

hello, if I don't need background when using dialog, how can I do that?

[gaiousantonio0909]

My problem was i need to customize the paper in my dialog. I have solved it by using paperProps in the

<Dialog
  PaperProps={{
    style: {
      backgroundColor: "transparent",
      boxShadow: "none"
    },
  }}
  onClose={accessModal}
  open={modal}
/>