问题
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
/>
回答1:
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.
回答2:
Change primary2Color: '#135DAE',
来源:https://stackoverflow.com/questions/47488211/change-header-color-of-material-ui-date-picker