material-uimui-x

Static date picker change background color of a week row


I need to change the week row background color of the StaticDatePicker of MUI. Depending if is past the current week (as orange color) and the current week (as blue color). Is there any way that i can override the class or some hide attribute that i need to add?

If its possible to override can someone tell how to override it?

Thanks


Solution

  • If you inspect the HTML for the StaticDatePicker, you will see that each week/row on the popout contains the .MuiDayCalendar-weekContainer class. Within each row, the days contain the .MuiPickersDay-root class and today contains the MuiPickersDay-today class. You can use these classes along with the :has pseudo-selector to style all of the days in the current week. Note that :has is not supported in all browsers so this may not be the best solution:

    <StaticDatePicker sx={{
      '& .MuiDayCalendar-weekContainer': {
        '.MuiPickersDay-root': {
          // Do your custom styling for all weeks other than this week here
        }
      }
    
      '& .MuiDayCalendar-weekContainer:has(> .MuiPickersDay-today)': {
        '.MuiPickersDay-root': {
          // Do your custom styling for this week here. The :has selector is more specific than the general styling you did above so this should override those styles
        }
      },
    }} />