MUI DatePicker 6.19.7 change picked day bgcolor using sx

Question

How to change the color element indicated by the arrow? Using sx{} DatePicker

   <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <DatePicker
                        className={styles.picker}
                         slotProps={{
                            day: {
                                sx: {
                                    backgroundColor: "red",
                                },
                            },
                        }}
                    />
                </LocalizationProvider>

Adding

                                sx: {
                                    "&.Mui-selected": {
                                        backgroundColor: "red",
                                    },

works but only if I click somewhere, then the color changes...

Was trying to use sx{} but had no idea how to do it on that element. My implementation changes the color of all days but not for selected.

Answer 1

You need to target the root picker class as well to change the background color of the selected day. Try this class:

slotProps={{                  
   day: {
        sx: {
            '&.MuiPickersDay-root.Mui-selected': {
                 bgcolor: 'red',
             },
            },
           },
         }}