reactjs - 如何在 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>

标签： reactjsmaterial-ui

Answer 1

覆盖 DialogTitle 'root' 类：

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

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

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