Material-ui: Possible border radius for dialogue?

[zammitjames]

When using the dialogue component, it seems that I'm unable to add a borderRadius to it. Has anyone tried to do this?

Thanks!

[janmauler]

You can set the default border radius using MuiThemeProvider:

import YourApp from './YourApp'
import ReactDOM from 'react-dom'
import {createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles'

const theme = createMuiTheme({
    shape: {
        borderRadius: 2
    },
    palette: ...,
    ...
})

ReactDOM.render(
    <MuiThemeProvider theme={theme}>
        <YourApp/>
    </MuiThemeProvider>,
    document.getElementById('root')
)

This will create a global styling applied to all Material-UI components across your application on any level of nesting.

If you don't want other components in your app to be affected, you can always add a className to your Dialog component and set it in your CSS:

.yourClassName > div:nth-child(2) {
    border-radius: 2px;
}

<Dialog className="yourClassName" open>
    ...
</Dialog>

[zammitjames]

Thank you, that worked great!

[nakanori]

I solved it with paperProps property.

<Dialog
  PaperProps={{
    style: { borderRadius: 2 }
  }}
  >
  ....
</Dialog>

[kkws]

you can see this https://codesandbox.io/s/ll0j5lxv1q

[mu3]

Here's for the Drawer https://codesandbox.io/s/vmj9q

@nakanori Is there a simpler way like yours?

[sagar-gh]

I solved it with paperProps property.

<Dialog
  paperProps={{
    style: { borderRadius: 2 }
  }}
  >
  ....
</Dialog>

I think Paper P is capital

[shah-ms]

You can set the default border radius using MuiThemeProvider:

import YourApp from './YourApp'
import ReactDOM from 'react-dom'
import {createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles'

const theme = createMuiTheme({
    shape: {
        borderRadius: 2
    },
    palette: ...,
    ...
})

ReactDOM.render(
    <MuiThemeProvider theme={theme}>
        <YourApp/>
    </MuiThemeProvider>,
    document.getElementById('root')
)

This will create a global styling applied to all Material-UI components across your application on any level of nesting.

If you don't want other components in your app to be affected, you can always add a className to your Dialog component and set it in your CSS:

.yourClassName > div:nth-child(2) {
    border-radius: 2px;
}

<Dialog className="yourClassName" open>
    ...
</Dialog>

How did you come to know that we have to use "shape"?
Is there any documentation to refer?
If yes, please provide a link.
Thank you