更改 Material-UI 日期选择器的标题颜色

Posted 2023-02-22

【中文标题】更改 Material-UI 日期选择器的标题颜色

【英文标题】：Change header color of Material-UI Date Picker

【发布时间】：2018-05-09 08:24:44

【问题描述】：

我在我的 React 单页应用程序中添加了一个 Material-UI 日期选择器，但我不知道如何更改标题颜色。 我试图从 muiTheme 调色板属性更改它，但标题是唯一保持不变的颜色：

 var muiTheme = getMuiTheme(
  palette: 
    primary1Color: '#135DAE',
    primary2Color: '#135DAE',
    primary3Color: '#135DAE',
    accent1Color: '#EF243A',
    accent2Color: '#135DAE',
    accent3Color: '#135DAE',
  ,
  appBar: 
    height: 50,
  ,
)

这是日期选择器的 html 代码：

 <DatePicker
        hintText="Selected day"
        value=this.state.controlledDate.toDate()
        onChange=this.handleChange
        autoOk
 />

【参考方案1】：

我认为您必须将日期选择器和标题颜色指定为 muiTheme 的一部分。以下来自getMuiSource.js on Github。

datePicker: 
      color: palette.primary1Color,
      textColor: palette.alternateTextColor,
      calendarTextColor: palette.textColor,
      selectColor: palette.primary2Color,
      selectTextColor: palette.alternateTextColor,
      calendarYearBackgroundColor: palette.canvasColor,
      headerColor: palette.pickerHeaderColor || palette.primary1Color,
    ,

另外，请参阅answer on SO。

【讨论】：

您好，请回答这个***.com/questions/53391633/…

如何更改按钮操作颜色？

【参考方案2】：

这是在 material-ui https://material-ui-pickers.dev/guides/css-overrides 中更改 DatePicker 主题的好指南

【参考方案3】：

更改primary2Color：'#135DAE'，