无法修改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，则对话框的角将按预期变圆。这引出了我的问题......

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

Answer 1

您可以覆盖如下样式。

const styles = { 

    root: { }
    paper: { borderRadius: 15 } 

} 


... 


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

</Dialog>

Answer 2

不幸的是，Material UI并不是非常风格友好的。在这种情况下，你可以覆盖以改变边界半径，所以我们必须应用我们自己的类：

<!-- https://stackoverflow.com/questions/48342730/placing-semantic-element-at-top-of-column#48342730 -->
<h1>2 test cases in this pen (scroll)</h1>
<div class="col-2">
  <p>Case 1: special element at the end of its container.<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil  quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
  <aside>your element</aside>
</div>

<p>Rest of content Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio.</p>

<div class="col-2">
  <aside>your element</aside>
  <p>Case 2: special element at the beginning of its container.<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
</div>

然后设置该类的样式，并且，是的，必须在以下两个CSS类以及TestPanel标题上设置border-radius：

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>

这最终看起来像你想要的： screenshot here

希望这有帮助！

Answer 3

创建主题对象时，可以在应用程序中全局覆盖<Dialog />样式。 paper的{​​{1}}键可让您定位边界半径。

MuiDialog

Dialog - CSS api Material UI Theming