我已经做了一个自定义的用户确认对话框从材质UI对话框组件，如here
我遇到了一个问题，覆盖对话框的字体。我可以覆盖颜色或背景色，但对话框的标题或按钮中的字体是从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