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

【问题标题】：Unable to modify some internal styles of Material UI's <Dialog> component无法修改 Material UI 的 <Dialog> 组件的一些内部样式
【发布时间】：2017-03-20 00:56:53
【问题描述】：

我正在尝试将一些相当简单的样式应用于我的<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，则对话框的角将按预期圆角。这引出了我的问题...

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

【问题讨论】：

这很棘手，让您想知道他们为什么不这样做；不仅仅是将一些类/子类应用于这些组件（但这是其他帖子中涉及的不同问题）-但是您可以添加自己的类className="my-dialog" 然后你可以做 .my-dialog > div:first-of-type { border-radius: 4px } - 或者添加 overflow:hidden 到你的外部 div 虽然这当然可能有其他意想不到的行为... 总之，它们的样式不好。

标签： css reactjs dialog material-ui

【解决方案1】：

您可以覆盖如下样式。

const styles = { 
  root: { }
  paper: { borderRadius: 15 } 
} 

// ... 

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

【讨论】：

您没有在答案中包含如何设置变量“classes”（正如您在“classes.root”中使用的那样）。您的答案已经完成了一半。

【解决方案2】：

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

const theme = createMuiTheme({
  overrides: {
    MuiDialog: {
      paper: {
        borderTopLeftRadius: '4px',
        borderTopRightRadius: '4px'
      }
    }
  }
})

Dialog - CSS api Material UI Theming

【讨论】：

这是正确的处理方式，应该被视为最佳答案。

【解决方案3】：

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

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

这种完美对我有用

【讨论】：

正确答案就在这里。 PaperProps 属性出现在 Material UI 文档中的 Dialog API 中。

【解决方案4】：

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

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

希望这会有所帮助！

【讨论】：