Material UI cannot customize DatePicker in v5.0?-CodePudding

Using the latest v5.0 version, and based the docs, I'm trying to customize the DatePicker with createTheme, but style does not seems to be overriden (functionality works fine).

Customizing button works fine, but it does nothing for DatePickers?

Theme:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          backgroundColor: "yellow", // <- this works fine
          color: "red"
        }
      }
    },
    MuiStaticDatePicker: {
      styleOverrides: {
        root: {
          backgroundColor: "yellow", // <- it does nothing ???
          color: "red"
        }
      }
    },
    MuiDatePicker: {
      styleOverrides: {
        root: {
          backgroundColor: "yellow", // <- does nothing too ???
          color: "green"
        }
      }
    }
  }
});

Component:

function App() {
  const [value1, setValue1] = React.useState<Dayjs | null>(dayjs(new Date()));
  const [value2, setValue2] = React.useState<Dayjs | null>(dayjs(new Date()));

  return (
    <ThemeProvider theme={theme}>
      <Button>click</Button>

      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
          value={value1}
          onChange={(newValue) => setValue1(newValue)}
          renderInput={(params) => <TextField {...params} />}
        />

        <StaticDatePicker
          value={value2}
          displayStaticWrapperAs="desktop"
          onChange={(newValue) => setValue2(newValue)}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </ThemeProvider>
  );
}

There are many similar questions like this, but they're all from previous versions. So what's the correct way of doing so in v5.0?

Please take a look at minimal sandbox.

CodePudding user response：

Material UI DatePicker is collection of components and not a single component. You need to target individual components inside datepicker. You can inspect the DatePicker in developer tools then check inside class what component name it is showing then you can use that component name to overwrite style using theme. below I have provided some sample components to test, You can extend this as per your need.

const theme = createTheme({
  components: {
    MuiCalendarPicker: {
      styleOverrides: {
        root: {
          backgroundColor: "yellow",
          color: "red"
        }
      }
    },
    MuiDayPicker: {
      styleOverrides: {
        header: {
          backgroundColor: "green",
          color: "red"
        }
      }
    },
    MuiPickersDay: {
      styleOverrides: {
        root: {
          backgroundColor: "brown",
          color: "red"
        },
        today: {
          backgroundColor: "orange",
          color: "red"
        }
      }
    },
  }
});