Unable to change some internal styles of the Material UI <Dialog> component

Question

I am trying to apply some reasonably simple styles to my component <Dialog>. In this case, I'm trying to go around corners with a border radius. Here are some simple inline styles that I would like to use to override the <Dialog>default styles :

let overrideStyles = {
  padding: 0,
  margin: 0,
  borderRadiusTopLeft: '4px',
  borderRadiusTopRight: '4px',
};

<Dialog>provides a wide range of options for overriding internal styles. These include bodyStyle, contentStyle, style, titleStyle, overlayStyleand actionsContainerStyle. I decided to try applying these styles to everyone.

<Dialog
  bodyStyle={overrideStyles}
  contentStyle={overrideStyles}
  style={overrideStyles}
  titleStyle={overrideStyles}
  overlayStyle={overrideStyles}
  actionsContainerStyle={overrideStyles}
  modal={overrideStyles}
>
  <TestPanel/>
</Dialog>

When I stand mine TestPanel, it looks like this:

Pay attention to the corners where my border radius was not applied ... I opened the inspector and noticed the following div:

div, , . ...

Material UI <Dialog> , CSS ?

Answer 1

, Material UI . , , :

let headerStyles = {
  color: 'white',
  textAlign: 'center',
  fontSize: 24,
  backgroundColor: '#3B8DBC',
  padding: 20,
  borderTopLeftRadius: 4,
  borderTopRightRadius: 4
};

let bodyStyles = {
  backgroundColor: 'white',
  padding: 10,
  height: 200
};

<Dialog className='test'>
  <div style={headerStyles}>Testing</div>
  <div style={bodyStyles}>5:43pm</div>
</Dialog>

, , , CSS-, TestPanel:

 /* Some rules use !important because Material UI sets them by default */
.test > div > div {
  background-color: #3B8DBC;  /* Same background-color as TestPanel */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.test > div > div > div {
  /* Not overriding the color and border radius here too result in your changes
     not being visible. */
  background-color: inherit !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.test > div > div > div > div {
  /* This div is the topmost padding between the modal content and the edge
     of the modal */
  padding: 0 !important;
}

, :

, !