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

IT技术 javascript html reactjs datepicker material-ui
2021-05-23 09:50:11

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

 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
 />
3个回答

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

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

另外，请参阅SO 上的这个答案。

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

更改primary2Color：'#135DAE'，

其它你可能感兴趣的问题
上一篇React Hooks + Firebase Firestore onSnapshot - 正确使用带有react-hooks的 Firestore 侦听器 下一篇从 Firestore 获取数据