how to style DatePicker with MUI? in typescript

im new to use MUI and DatePicker im trying to change colors of selected dates in the code but nothing works with me

here is my code:

<DatePicker
  slotProps={{
    textField: {
      size: isDesktop ? "medium" : "small",
      variant: "standard",
    },
  }}
  sx={{
    flex: 1,
    fontSize: ".875rem !important",
    "& input::placeholder": {
      fontSize: ".875rem !important",
    },
    ".MuiOutlinedInput-root": {
      fontSize: ".875rem !important",
    },
    "& .MuiPickersDay-root": {
      color: "white",
      "&:hover": {
        backgroundColor: "rgba(0, 128, 255, 0.2)",
        color: "blue",
      },
      "&.Mui-selected": {
        backgroundColor: "rgba(0, 128, 255, 0.3) !important",
        color: "white !important",
        "&:hover": {
          backgroundColor: "rgba(0, 128, 255, 0.4) !important",
        },
      },
    },
  }}
  value={startShowDate}
  format="dd/MM/yyyy"
  onChange={(newValue) => startDateHandle(newValue)}
/>
<DatePicker
  slotProps={{
    textField: {
      size: isDesktop ? "medium" : "small",
      variant: "standard",
    },
  }}
  sx={{
    flex: 1,
    fontSize: ".875rem !important",
    "& input::placeholder": {
      fontSize: ".875rem !important",
    },
    ".MuiOutlinedInput-root": {
      fontSize: ".875rem !important",
    },
    "& .MuiPickersDay-root": {
      color: "white",
      "&:hover": {
        backgroundColor: "rgba(0, 128, 255, 0.2)",
        color: "blue",
      },
      "&.Mui-selected": {
        backgroundColor: "rgba(0, 128, 255, 0.3) !important",
        color: "red !important",
        "&:hover": {
          backgroundColor: "rgba(0, 128, 255, 0.4) !important",
        },
      },
    },
  }}
  value={endShowDate}
  format="dd/MM/yyyy"
  onChange={(newValue) => endDateHandle(newValue)}
/>

noting that ive read the documentations and tried Props but still not working with me so the idea is to change the color of the selected days any help would be highly appreciated!

Solution

Admittedly the docs are pretty sparse on this, but you want to target the "paper" slots – and since you're handling both desktop/mobile, you'll probably want to do this for both desktopPaper and mobilePaper:

<DatePicker
  slotProps={{
    textField: {
      size: "medium",
      variant: "standard",
    },
    desktopPaper: {
      sx: {
        "& .MuiDateCalendar-root": {
          backgroundColor: "white",
          "& [class$='MuiPickersDay-root'].Mui-selected": {
            backgroundColor: "rgba(0, 128, 255, 0.3) !important",
            color: "white",
          },
        },
      },
    },
  }}
  sx={{}}
  value={startShowDate}
  format="dd/MM/yyyy"
  onChange={(newValue) => startDateHandle(newValue)}
/>

You may also have some luck doing this directly in your theme:

const theme = createTheme({
  components: {
    MuiDatePicker: {
      defaultProps: {
        displayWeekNumber: true,
      },
    },
    MuiDateCalendar: {
      styleOverrides: {
        root: {
          backgroundColor: "#f0f0f0",
        },
      },
    },
  },
});

// ...

<ThemeProvider theme={theme}>
   <YourApp />
</ThemeProvider>