Why is the Datepicker calendar in Material UI not aligning properly?

Question

I am using datepicker from "@mui/x-date-pickers/DatePicker".

import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";



    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DatePicker
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>

The dates and the weekdays should be in a straight line column

The columns are not in straight line

Did I accidentally overwrite the CSS somewhere?

Answer 1

I ran into a similar issue with the styling of the calendar icon (DatePicker Icon Button). I was able to modify it by following the suggestions in this post: How to change the icon in MUI DatePicker?

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    OpenPickerButtonProps={{ style: { marginRight: 2 } }}
    openTo="year"
    views={['year', 'month', 'day']}
    label="Date"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} helperText={null} />}
/>
</LocalizationProvider>