如何在react.js中的Material UI中更改DialogTitle和DialogContent中的字体颜色

Question

如何在React.js的 Material UI中更改DialogTitle和DialogContent中的字体/文本颜色

更改Dialog的背景颜色可以，但是尝试更改Dialog和DialogContent的字体颜色不起作用。

<Dialog
    open={this.state.open}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
    PaperProps={{
       style: {
           backgroundColor: "#fff",
       },
    }}
    >

    <DialogTitle id="alert-dialog-title">
         "Use Google's location service?"
    </DialogTitle>

    <DialogContent>
         <DialogContentText id="alert-dialog-description">
              Hello 
         </DialogContentText>
    </DialogContent>

    <DialogActions>
         <Button onClick={this.handleClose} color="primary">
                OK
         </Button>
    </DialogActions>
</Dialog>

Answer 1

覆盖DialogTitle'root'类：

root: {
    backgroundColor: theme.palette.primary.main,
    '& h6': {
      color: 'red'
    }
  }

如果要更改所有对话框，请通过覆盖主题全局进行此操作：

MuiDialogTitle: {
      root: {
        backgroundColor: theme.palette.primary.main,
        '& h6': {
          color: 'red'
        }
      }
    }