I am currently working with MUI in React and using the DatePicker component from the @mui/x-date-pickers library. The version I am using is 6.0.3. I have encountered an issue where, upon selecting the first day, the specified color changes as shown in the image below. When reopening the calendar window, the default color is displayed until clicking on another area, which then changes the color back to the specified one. Is there a solution to this problem that anyone can provide? I have tried searching for a fix but haven't had any luck, so I'm reaching out here for help. Please advise if my search approach is incorrect.
https://i.stack.imgur.com/bIEPe.png https://i.stack.imgur.com/0Ixb0.png https://i.stack.imgur.com/efVCM.png
Below is the code snippet I'm using:
import { LGTheme } from '@libs/color';
import { DatePicker } from '@mui/x-date-pickers';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { koKR } from '@mui/x-date-pickers/locales';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
const DatePickerTest = () => {
return (
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale={'ko'}
localeText={koKR.components.MuiLocalizationProvider.defaultProps.localeText}
dateFormats={{ monthAndYear: 'YYYY년 MM월' }}
>
<DatePicker
label=""
format="YYYY-MM-DD"
slotProps={{
textField: {
size: 'small',
},
day: {
sx: {
['&[data-mui-date="true"] .Mui-selected']: {
// Reset the background color of the selected date
backgroundColor: 'blue',
},
':not(.Mui-selected)': {
backgroundColor: '#fff',
borderColor: LGTheme[0],
},
'&.Mui-selected': {
color: '#fff',
backgroundColor: LGTheme[0],
borderColor: LGTheme[0],
':hover': {
color: '#fff',
backgroundColor: LGTheme[0],
borderColor: LGTheme[0],
},
},
':hover': {
color: '#fff',
backgroundColor: LGTheme[0],
borderColor: LGTheme[0],
},
},
},
}}
/>
</LocalizationProvider>
);
};
export default DatePickerTest;