[pickers][DatePicker] Style inconsistencies

[bernbecht]

Context

There are two related style issues with the MUI DatePicker component:

1. Today Element Style Not Applied Initially:
   • The style for the "Today" element does not appear when the user clicks on the date picker for the first time.
   • The style only becomes visible when the user clicks to open the picker or when the picker is opened with a pre-selected date.

https://github.com/mui/material-ui/assets/1577809/0c1a7352-0436-4b60-a1f2-0b97b621ba46

Example Code

const newTheme = (theme) =>
  createTheme({
    ...theme,
    components: {
      MuiPickersDay: {
        styleOverrides: {
          today: {
            backgroundColor: "#FFE8D4",
          },
          selected: {
            backgroundColor: "green",
          },
        },
      },
    },
  });

export default function BasicDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={["DatePicker"]}>
        <ThemeProvider theme={newTheme}>
          <DatePicker label="Basic date picker" />
        </ThemeProvider>
      </DemoContainer>
    </LocalizationProvider>
  );
}

2. Selected Day Style Not Applied Using createTheme:
   • The selected option in createTheme does not style the selected day in the DatePicker component.
   • Currently, the only way to apply the selected day style is by using the sx option in slotProps.
   • However, this style is only displayed if the user clicks on the date picker.

https://github.com/mui/material-ui/assets/1577809/86c161c1-65a3-4e13-8591-0769924c8d29

Example code

const defaultStyles = {
  ".MuiPickersDay-root": {
    "&.Mui-selected": {
      backgroundColor: "red",
    },
  },
};

<DatePicker
  label="Basic date picker"
  slotProps={{
    layout: {
      sx: {
        ...defaultStyles,
      },
    },
  }}
/>

Link to system for reproducing the issue

https://codesandbox.io/p/sandbox/mui-datepicker-ltv8gp?file=%2Fsrc%2FDemo.tsx%3A43%2C38

Search keywords:

[LukasTy]

Hello @bernbecht, if you check the console, there is an error message there regarding the specificity issue and how to resolve it:

Could you please try applying the following diff and see if that helps? 🤔

-selected: {
-  backgroundColor: "green",
-},
+root: {
+  "&.Mui-selected": {
+    backgroundColor: "green",
+  },
+},

P.S. Have you had the chance to check the customization playground in the docs?

[bernbecht]

Hey @LukasTy, thanks for getting back to me! 👋

I gave your diff a shot, and now I can tweak the selected day with createTheme() ✨ Your heads up about the console was great!

But here's the scoop: the style only pops up when users click the date picker, as mentioned in the issue. :/

I leaned towards using the selected property in createTheme() because TypeScript nudged me with it as an option for MuiPickersDay styleOverrides. Peeking at interface PickersDayClasses, here's what I found:

// Snippet from @mui/x-date-pickers/PickersDay/pickersDayClasses.d.ts
export interface PickersDayClasses {
    /** Styles applied to the root element. */
    root: string;
    ...
    /** State class applied to the root element if `selected=true`. */
    selected: string;
    ...
}

Looks like using selected might lead others down the same confusion lane when they're styling the selected day.

P.S. Did you get a chance to peek at the customization playground in the docs?

Yep, already scoped it out! 🕵️‍♂️ Got a good grip on how to tweak those pickers. Cheers! 😄

[LukasTy]

Looks like using selected might lead others down the same confusion lane when they're styling the selected day.

Thank you for paying attention to this point. I agree that putting all the available classes in the list of styleOverrides is not ideal, because some of them will not work and produce a console error. 🙈 We'll investigate how this can be improved. 😉

But here's the scoop: the style only pops up when users click the date picker, as mentioned in the issue. :/

The issue is that you are styling the selected day, but there are additional styles for the focus state that you'd need to change. 🤔

https://github.com/mui/mui-x/blob/bc93847a609efacda53c15674732f8cecc305473/packages/x-date-pickers/src/PickersDay/PickersDay.tsx#L149-L157

[michelengelen]

@LukasTy I will add this to the board toi investigate the class issue.

[bernbecht]

A part from the class issue, the styling is clear now :) Thank you