如何使用MUI设置DatePicker的样式？在打字稿中

Question

我刚开始使用 MUI 和 DatePicker 我试图更改代码中选定日期的颜色，但对我来说没有任何作用

这是我的代码：

<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)}
/>

注意到我阅读了文档并尝试了

Props

但仍然无法与我合作 所以想法是改变所选日期的颜色 任何帮助将不胜感激！

Answer 1

诚然，文档在这方面非常稀疏，但您希望针对“纸质”插槽 - 由于您同时处理桌面/移动设备，因此您可能希望对

desktopPaper

和

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)}
/>

您也可能会幸运地直接在您的主题中执行此操作：

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

// ...

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