我们正在使用基于React的MUI。我在 MUI 中使用 @mui/x-date-pickers 库中的 DatePicker。我使用的是6.0.3版本。 但是,如下图所示,当选择第一个选定的日期时,指定的颜色会发生变化。当再次打开日历窗口时,会显示默认颜色,但当单击另一个区域时,会更改指定的颜色。有办法解决这个问题吗?我搜了一下没找到,所以才来问一下。如果搜索方法有误,请告知。帮助我
使用的代码如下,请帮忙
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;