How to change width of Mui DatePicker v5

Question

I'm trying to change the width of the calendar popup on the Mui DatePicker but can't seem to figure it out. I have changed the width of the input using:

renderInput={(params) => <TextField {...params} sx={{ ...formStyles }} />}

But I want to change the width of the calendar as well. I'm new to working with any component library, so maybe I'm missing something. The docs said you could override the theme with the name MuiDatePicker, but when I try:

const theme = createTheme({
  components: {
    MuiDatePicker: {},
  },
});

I'm getting a typescript error saying that MuiDatePicker isn't assignable to Components

Answer 1

Are you trying to change the width of the input TextField? I am doing it like so, and it seems to do the trick everytime:

1. Wrap your DatePicker in a div

<div className={classes.datePicker}>
  <DatePicker format="dd/mm/yyyy">
</div>

2. Override MUI styles of the div's TextField like so:

    datePicker: {
    "& .MuiTextField-root": {
      width: 200,
    },

Not sure if that's the best way to do it, but it works for me, also in MUI v5.