Material-UI 对话框字体覆盖答案

【问题标题】：Material-UI dialog font overwritingMaterial-UI 对话框字体覆盖
【发布时间】：2020-04-23 15:15:21
【问题描述】：

我从 Material UI Dialog 组件制作了一个自定义用户确认对话框，例如 here

我遇到了覆盖对话框字体的问题。我可以覆盖颜色或背景颜色，但 Dialog 的标题或按钮中的字体是从 Material-UI 继承的。我成功覆盖了其他组件中的 Material-UI 字体，但在这部分没有回调：

const UserConfirmation = (
  message: string,
  callback: (shouldNavigate: boolean) => void
) => {
  const container = document.createElement('div')
  container.setAttribute('custom-confirmation-navigation', '')
  document.body.appendChild(container)
  const closeModal = (shouldNavigate: boolean) => {
    ReactDOM.unmountComponentAtNode(container)

    callback(shouldNavigate)
  }
  ReactDOM.render(
    <>
      <Dialog
        fullWidth={true}
        maxWidth="sm"
        open={true}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"

      >
        <DialogTitleWrapper
          style={{fontFamily: `BuenosAires !important`, color: `orange`}}
          >
          Discard draft?
        </DialogTitleWrapper>
        <DialogContent>
          <p> {message} </p>
        </DialogContent>
        <DialogActionsWrapper>
          <Button
            onClick={() => closeModal(true)}
            fullWidth={true}
            variant="outlined"
            label="Discard"
          />
          <div style={{ width: '80%' }} />
          <Button
            onClick={() => closeModal(false)}
            fullWidth={true}
            variant="contained"
            label="Cancel"
          />
        </DialogActionsWrapper>
      </Dialog>
    </>,
    container
  )
}
export default UserConfirmation

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

感谢Alex

这对我来说很棒：

<DialogTitle disableTypography="true">

此外，按钮的标签是这样修复的： label={<h5 style={{ textTransform: 'none' }}>Cancel</h5>}

【讨论】：

【解决方案2】：

您可以使用classes 对象来覆盖或扩展应用于组件的样式。 here

创建如下自定义样式

const useStyles = makeStyles({

  customDialogTitle: {
    fontFamily:'Impact'//sans-serif
  }
    });

并分配给classes

   <DialogTitle  disableTypography="true"

       classes={{
                 root: classes.customDialogTitle
                }}
    >
    .....
    </DialogTitle>

sample sandbox

【讨论】：