更改Material-UI日期选择器的标题颜色 [英] Change header color of Material-UI Date Picker
本文介绍了更改Material-UI日期选择器的标题颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在React单页应用程序中添加了Material-UI日期选择器,但是我不知道如何更改标题颜色. 我尝试从muiTheme Palette属性更改它,但标头是唯一保持不变的颜色:
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,
},
})
这是日期选择器的HTML代码:
Here is the Date Picker's HTML code:
<DatePicker
hintText="Selected day"
value={this.state.controlledDate.toDate()}
onChange={this.handleChange}
autoOk
/>
推荐答案
我认为您必须指定datepicker和标头颜色作为muiTheme的一部分.以下摘自Github上的 getMuiSource.js .
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,
},
此外,请参见关于SO的答案.
这篇关于更改Material-UI日期选择器的标题颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文