How to style the day button in react material-ui date picker

Question

I have material-ui date picker in my react project and I need to know ow to style the day buttons Specifically, changing the text color of the available days. As you can see from the screenshot it is black by default.

I have tried the following with no luck:

const muiTheme = getMuiTheme({
  datePicker: {
    selectColor: '#fd5f00',
    headerColor: '#f0f0f0',
    color: '#fd5f00',
    textColor: '#303030',
    calendarTextColor: '#fd5f00'
  },
  flatButton: {
    color: '#fd5f00',
    primaryColor: '#fd5f00',
    secondaryColor: '#fd5f00',
    disabledColor: '#fd5f00',
  },
});

I really hope that it is doable. Thank you in advance.

Answer 1

You can set the base text color by specifying palette.textColor.

const muiTheme = getMuiTheme({
  palette: {
    textColor: '#fd5f00',
  }
});

Looking at the source for DayButton.js, it looks like they'll automatically apply an opacity to any disabled date for you, so effectively palette.textColor is setting the color of the available days.