MUI DateTimePicker Color Styling

I am editing the colors of the MUI Date Time Picker. Is this the optimal way, or is there another more formal way in MUI Inputs? I didn't find any in the reference, so directly edited the sx.

  <DateTimePicker
    value={formValue ? dayjs(formValue) : null}
    slotProps={{
      day: {
        sx: {
          "&.Mui-selected": {
            backgroundColor: "green !important",
            color: "white",
          },
        },
      },
      popper: {
        sx: {
          "& .MuiButton-text": {
            color: "green",
          },
          "& .MuiMenuItem-root.Mui-selected": {
            backgroundColor: "green !important",
            color: "white",
          },
        },
      },
    }}
  />

There's nothing wrong with the way you're doing it, but for better reusbaility and maintainability you may want to make that as it's own themed component (as @Stitt suggested) or add your customizations to the MUI theme itself.

For example, with the theme (wild styling used to denote styling changes):

export const theme = createTheme({
  palette: { mode: "light" },
  components: {
    MuiDateTimePicker: {
      defaultProps: {
        slotProps: {
          textField: { variant: "outlined" },
          actionBar: {
            sx: {
              bgcolor: "#336699",
              pt: 1.5,
              // cancel button & ok button
              "& .MuiButton-root:first-of-type": {
                color: "#f44336",
                fontWeight: 800,
                textTransform: "none",
              },
              "& .MuiButton-root:last-of-type": {
                color: "#00e676",
                fontWeight: 900,
                textTransform: "none",
                fontSize: "2rem",
              },
            },
          },
        },
      },
    },
    MuiPickersLayout: {
      styleOverrides: {
        root: { backgroundColor: "#0011ff" },
        contentWrapper: { backgroundColor: "#0011ff" },
      },
    },
    MuiPickersCalendarHeader: {
      styleOverrides: {
        root: {
          backgroundColor: "#00ff00",
          color: "#000",
          "& .MuiIconButton-root": { color: "#000" },
          "& .MuiPickersCalendarHeader-label": { fontWeight: 800 },
        },
      },
    },
    MuiPickersDay: {
      styleOverrides: {
        root: {
          backgroundColor: "#ff69b4",
          color: "#000",
          "&:hover": { backgroundColor: "#ff1493" },
        },
        today: {
          outline: "2px solid #ffff00",
          fontSize: "20px",
          color: "#ff0000",
        },
        selected: { backgroundColor: "#ffff00", color: "#000" },
      },
    },
    MuiDayCalendar: {
      styleOverrides: {
        weekDayLabel: {
          fontWeight: 900,
          fontSize: "1.2rem",
          color: "#ff00ff",
          backgroundColor: "#ffff00",
          borderRadius: 4,
          padding: "2px 4px",
        },
      },
    },
    MuiMultiSectionDigitalClock: {
      styleOverrides: {
        root: {
          backgroundColor: "#111",
          "& .MuiMenuItem-root": {
            color: "#0ff",
            fontWeight: 700,
            "&.Mui-selected": { backgroundColor: "#0ff", color: "#000" },
          },
        },
      },
    },
  },
});

Would produce this (with styling constrained to only the MUI DateTimePicker):

Working Codesandbox: https://codesandbox.io/p/sandbox/romantic-curie-mhqg8w