Изменить цвет заголовка выбора материала-пользовательского интерфейса

Я добавил средство выбора даты для пользовательского интерфейса материала в свое приложение React для одной страницы, но не знаю, как изменить цвет заголовка. Я попытался изменить это свойство 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
 />

2 ответа

Решение

Я думаю, что вы должны указать указатель даты и цвет заголовка как часть muiTheme. Ниже приведен файл getMuiSource.js на 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,
    },

Также см. Этот ответ на SO.

Это хорошее руководство по изменению тем DatePicker в material-ui https://material-ui-pickers.dev/guides/css-overrides.

Изменить primary2Color: '#135DAE',

Другие вопросы по тегам