Search code examples
cssreactjsmaterial-uidatepicker

I am using react mui @mui/x-date-pickers, please tell me how to change color of DatePicker selected area

We are using MUI based on React. I am using DatePicker from @mui/x-date-pickers library in MUI. I am using version 6.0.3. However, as shown in the image below, when the first selected day is selected, the specified color is changed. When the calendar window is opened again, the default color is displayed, but when another area is clicked, the specified color is changed. Is there a way to solve this problem? I did a search and couldn't find it, so I'm asking. Please let me know if the search method is incorrect. Help me

enter image description here enter image description here enter image description here

The code used is below please help

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;
Solution

  • The problem is that you are using the .Mui-selected class, which only applies to the selected date, not the current date. The current date is the one that is highlighted when you open the calendar, and it may or may not be the same as the selected date. The current date has a different class, .MuiPickersDay-root, which you need to target in your sx prop.

    To fix your issue, you need to pass the .MuiPickersDay-root class along with the .Mui-selected class in your sx prop.

    For example:

    <DatePicker
  slotProps={{
    day: {
      sx: {
        "&.MuiPickersDay-root.Mui-selected": {
          backgroundColor: "red",
        },
      },
    },
  }}
/>

    You can see the whole example here.