CODEWITHSUNDEEP
javascripthtmlreactjsdatepickermaterial-ui
Ionuț Gabriel Pițigoi
Ionuț Gabriel Pițigoi

Reputation: 299

Change header color of Material-UI Date Picker

I added a Material-UI Date Picker in my React Single Page Application but I don't know how to change the header color. I tried to change it from muiTheme pallete property but the header is the only color that remain the same:

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

Here is the Date Picker's HTML code: 

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

Upvotes: 4

Views: 25000

Answers (3)

Sandeep Amarnath
Sandeep Amarnath

Reputation: 6917

This is a good guide for changing DatePicker themes in material-ui https://material-ui-pickers.dev/guides/css-overrides

Upvotes: 1

Сосед по комнате
Сосед по комнате

Reputation: 9

Change primary2Color: '#135DAE',

Upvotes: -3

bluesixty
bluesixty

Reputation: 2407

I think you have to specify the datepicker and header color as part of the muiTheme. The following is from 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,
    },

Also, see this answer on SO.

Upvotes: 10

Related Questions