Material-ui: [Dialog] Change background color with out editing the theme's canvas colour?

[ghost]

Setting contentInnerStyle, contentStyle, or style = {{backgroundColor: "#ededed"}} doesn't seem to change it from white.

[jgoux]

I'm also interested by this too. It's impossible to change even by adding a custom class.

[ryanfields]

I was hoping the style prop would work, but that oddly seems to change the overlayStyle instead.

[jcheroske]

I have just spent the last several hours plumbing the depths of the Dialog component. It appears that there is a direct child DIV of the 'content' DIV that is unreachable. None of the *style props target this element, but it has essential styles applied to it. These include the background color of the entire dialog, border radius and height.

[seanrankin]

Funny, we were looking for the same thing at the same time @jcheroske... I'm running down that rabbit hole myself today.

[seanrankin]

Ok @jcheroske here's what I did:

// Declared a style with important...
.dialogRadiusHack > div:first-child {
  border-radius: 10px 10px 5px 5px !important;
}

//Set a custom style name on the dialog: 
contentClassName="dialogRadiusHack"

[jcheroske]

!important wins the Internet yet again.

[mbrookes]

Resolved by the new styling approach in next.

[idangozlan]

@mbrookes what is next?

[mbrookes]

@idangozlan https://github.com/callemall/material-ui/tree/next

[hhsadiq]

@mbrookes can you tell little bit what is new styling approach. This was the link provided in README.md, but its no more working.

[Zuurkern]

@hhsadiq It's JSS with jss-theme-reactor

[georgelivas]

Work's in next with:
CSS:
.paper{ background-color: rgba(255, 255, 255, 0.90) !important; }
JS/React:
<Paper elevation={4} className='paper'>