React JS - 如何在对话框的 PaperProps 中添加样式（material-ui）答案

【问题标题】：React JS - How to add style in PaperProps of Dialog (material-ui)React JS - 如何在对话框的 PaperProps 中添加样式（material-ui）
【发布时间】：2018-08-07 08:53:43
【问题描述】：

我正在使用 Material-ui ReactJs 中的对话框组件。

<Dialog fullScreen open={this.state.open}
  PaperProps={{ classes: {root: classes.dialogPaper} }}
  onClose={this.handleClose.bind(this)} transition={this.props.transition}>
  {this.props.children}
</Dialog>

在上面的代码中，我已经覆盖了 PaperProps 的根类。现在我还想覆盖 PaperProps 中的样式。是否可以在 PaperProps 中覆盖样式。

类似PaperProps={{ classes: {root: classes.dialogPaper}, style:{} }}

如果我错了，请告诉我。我也想覆盖样式。

【问题讨论】：

您能分享一下为什么要覆盖内联样式和 classes 属性吗？
所以我创建了一个通用的对话框组件，它在项目中的任何地方都使用了覆盖类，因为要在对话框的 Paper 组件中添加一些填充和更多属性，所以我使用 PaperProps 覆盖它但现在这个组件在代码中的某个地方使用 PaperProps 类不需要填充，因此我需要使用 PaperProps 中的样式覆盖它。我希望你现在清楚了。

标签： reactjs dialog material-ui inline-styles overriding

【解决方案1】：

我得到了答案

<Dialog
{...otherProps}
  PaperProps={{
    style: {
      backgroundColor: 'transparent',
      boxShadow: 'none',
    },
  }}
>
  {/* ... your content ... */}
</Dialog>

这就是我们如何在对话框组件的 PaperProps 中放置样式。

【讨论】：

【解决方案2】：

<Dialog
  PaperProps={{
    style: {
      backgroundColor: 'Blue',
      color:'black'
    },
  }}
>
</Dialog>

【讨论】：

请不要只发布代码作为答案，而是说明您的代码的作用以及它如何解决问题。带有解释的答案通常质量更高，更有可能吸引投票。