Reactjs 如何使用React库的材质UI编辑MuiModal根？

我正在为React使用最新版本的Material UI库，并尝试向MUI Modal css类添加其他css。见截图

我正在使用此模式，我想将justifyContent alignItems添加到Material Ui中呈现模式的根目录中

在以下教程中，我阅读了有关使用classes属性覆盖根目录的内容：

我试着做了以下几件事：

<Modal style={{ justifyContent: "center" }} open={open}>
 <div className={modalPaper}>
   <Typography variant="title" id="modal-title">
    Add a club
   </Typography>
  <Typography variant="subheading" id="simple-modal-description">
   Before you can continue you'll have to add a club to the backend
  </Typography>
 </div>
</Modal>

但这似乎对任何事情都没有影响

---

有人能帮我一下吗？

覆盖模态组件样式的另一种方法是使用className属性。我假设您下一步将使用react jss和material ui，下面是您将如何做到这一点：

const styleSheet = theme => ({
  customModalRoot: {
    justifyContent: 'center',
    alignItems: 'center',
  },
})

class YourComponent extends Component {
  render() {
    const { classes } = this.props

    return (
      <Modal className={classes.customModalRoot} open={open}>
        <div className={modalPaper}>
          <Typography variant="title" id="modal-title">
            Add a club
          </Typography>
          <Typography variant="subheading" id="simple-modal-description">
            Before you can continue you'll have to add a club to the backend
          </Typography>
        </div>
      </Modal>
    )
  }
}

如果你看一下模态源代码：你会发现它们使用你给组件的道具类名。这就是他们在您链接的文档中提到的行为：

---

如果你想，我还修改了Material的codesandbox示例，从他们的文档中添加了一个背景色：红色，使用这种技术在模态背景中：

你能在这里做一个简单的示例，我来看看：这正是我所做的@Jonas请看一下：我自己修复了它，显然，我需要创建一个新的modalStyle.jsx，在这里我加载所有样式，而不是将应用于仪表板组件的样式发送到addModal组件……好的，很好，我很高兴你能解决这个问题。做得好！

const styleSheet = theme => ({
  customModalRoot: {
    justifyContent: 'center',
    alignItems: 'center',
  },
})

class YourComponent extends Component {
  render() {
    const { classes } = this.props

    return (
      <Modal className={classes.customModalRoot} open={open}>
        <div className={modalPaper}>
          <Typography variant="title" id="modal-title">
            Add a club
          </Typography>
          <Typography variant="subheading" id="simple-modal-description">
            Before you can continue you'll have to add a club to the backend
          </Typography>
        </div>
      </Modal>
    )
  }
}