Question

124

Change header color of Material-UI Date Picker

rated 0 times [ 128] [ 4] / answers: 1 / hits: 23576 / 7 Years ago, sat, november 25, 2017, 12:00:00

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

 />

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jarettajb

Add To Favorites

Follow

Total Points: 678

Total Questions: 94

Total Answers: 90

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

jarettajb questions

1 Remove unused Javascript base.js (Youtube iframe api)

Thu, Dec 17, 20, 00:00, 3 Years ago

1 how to define variable google when using google one tap javascript API

Thu, Dec 10, 20, 00:00, 4 Years ago

1 How do I fix this issue: node_modules/expo/AppEntry.js: [BABEL]?

Mon, Nov 9, 20, 00:00, 4 Years ago

1 node js, read a specific column from csv file and convert it to an array to be used in other function

Tue, May 12, 20, 00:00, 4 Years ago

1 Check If Array Has Value in Angular

Tue, May 12, 20, 00:00, 4 Years ago

View All

answered 7 Years ago vaughns · Accepted Answer

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.