Question

我正在为React使用最新版本的Material-UI库，我正在尝试向MUI-Modal css类添加额外的css。（见截图）

我正在使用此模态https://material-ui-next.com/utils/modals/我想将justifyContent en alignItems添加到在Material-Ui中呈现模态的根。

我已经阅读了有关使用以下教程中的classes属性覆盖root的内容：

https://material-ui-next.com/customization/overrides/

我尝试做以下事情：

<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>

我也尝试过classes属性和className ..

classes={{root: { justifyContent: "center" }}

但似乎这根本不会影响任何事情。

有人可以帮帮我吗？

Answer 1

覆盖Modal组件样式的另一种方法是使用className属性。我假设你正在使用react-jss和material-ui-next，所以这就是你要做的：

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>
    )
  }
}

如果你看一下Modal源代码：https://github.com/mui-org/material-ui/blob/v1-beta/packages/material-ui/src/Modal/Modal.js#L278，你会发现他们使用你提供给组件的道具className。这是他们在您关联的文档中提及的行为：https://material-ui-next.com/customization/overrides/#overriding-with-class-names。

如果您希望我也使用此技术在模式背景中添加background-color: red，从文档中修改了Material＆＃39的codesandbox示例：https://codesandbox.io/s/x73jr9my8o

如何使用Material-UI为React库编辑MuiModal-root？

1 个答案: