MUI DatePicker 6.19.7 使用 sx 更改所选日期的背景颜色

Question

如何改变箭头所指的颜色元素？使用 sx{}

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

添加

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

有效，但只有当我点击某个地方，颜色才会改变......

尝试使用 sx{} 但不知道如何在该元素上执行此操作。我的实现改变了所有日子的颜色，但没有改变选定的颜色。

Answer 1

您还需要定位根选择器类来更改所选日期的背景颜色。 试试这个

class

：

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