[pickers][DatePicker] Style inconsistencies about mui-x HOT 5 OPEN

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. 🤔

from mui-x.

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

from mui-x.

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?

from mui-x.

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! 😄

from mui-x.

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

from mui-x.