无法修改Material UI的<Dialog>组件的某些内部样式

Question

我正在尝试将一些合理的简单样式应用于我的<Dialog>组件。在这种情况下，我试图用边界半径将角圆化。以下是一些我想用来替代默认<Dialog>样式的简单内联样式：

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

<Dialog>为覆盖内部样式提供了多种可能性。这些措施包括bodyStyle，contentStyle，style，titleStyle，overlayStyle，和actionsContainerStyle。我决定尝试将这些样式应用于每种样式。

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

当渲染我的时TestPanel，它最终看起来像这样：

注意那些尚未应用边框半径的角落...我打开了检查器，并注意到以下div：

如果将边框半径样式应用于突出显示的div，则对话框的角将按预期的方式变圆。这引出我的问题...

如何<Dialog>在我的CSS尝试时覆盖Material UI 组件的样式以应用圆角？

Answer 1

我用 paperProps 属性解决了这个问题。

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

这种完美对我有用

Answer 2

You can override styles like below.

const styles = { 

    root: { }
    paper: { borderRadius: 15 } 

} 


... 


<Dialog classes={{ 
    root: classes.root, 
    paper: classes.paper 
}}>

</Dialog>

Answer 3

不幸的是，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;
}

这最终看起来像你想要的： 屏幕截图在这里

希望这可以帮助！