我正在使用react mui @mui/x-date-pickers,请告诉我如何更改DatePicker所选区域的颜色

问题描述 投票:0回答:0

我们正在使用基于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;


css reactjs material-ui datepicker
© www.soinside.com 2019 - 2024. All rights reserved.