如何在React Material-UI日期选择器中设置日期按钮样式

It looks like the theme keys you’re using aren’t targeting the actual date text in the calendar grid—let’s fix that. Since you’re using the older Material-UI v0.x (with getMuiTheme), here’s how to properly style the available dates:

1. Use the Correct Theme Keys #

The calendarTextColor key doesn’t affect the day text in the calendar grid. Instead, you need to target the day component nested under the calendar section of the datePicker theme config. Update your theme setup like this:

const muiTheme = getMuiTheme({
  datePicker: {
    // Keep your existing header/select styles if needed
    selectColor: '#fd5f00',
    headerColor: '#f0f0f0',
    color: '#fd5f00',
    textColor: '#303030',
    // Add this to style available dates
    calendar: {
      day: {
        color: '#fd5f00', // Your desired text color for available dates
        // Optional: Customize hover state too
        hoverColor: '#e04e00'
      }
    }
  },
  flatButton: {
    color: '#fd5f00',
    primaryColor: '#fd5f00',
    secondaryColor: '#f...' // Keep your existing flatButton styles
  }
});

2. Alternative: Inline Style Override #

If the theme approach still doesn’t take effect, you can directly override the day styles via the DatePicker’s calendarStyle prop:

<DatePicker
  // Your existing DatePicker props
  calendarStyle={{
    day: {
      color: '#fd5f00'
    }
  }}
/>

3. Check for Style Specificity #

Sometimes custom CSS in your project can override Material-UI’s styles. Use your browser’s dev tools to inspect a date element (look for the .mui-date-picker-calendar-day class) and confirm your custom color is taking precedence. If not, add more specific CSS rules or use !important as a last resort.

Note: If you ever upgrade to Material-UI v1+, the approach changes—you’d use createTheme and override the MuiPickersDay component instead. But this solution is tailored to the v0.x version you’re using now.

内容的提问来源于stack exchange，提问作者Ray