为什么 Material UI 中的 Datepicker 日历没有正确对齐？答案

【问题标题】：Why is the Datepicker calendar in Material UI not aligning properly?为什么 Material UI 中的 Datepicker 日历没有正确对齐？
【发布时间】：2023-02-17 02:26:52
【问题描述】：

我正在使用来自“@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

我是否不小心在某处覆盖了 CSS？

【问题讨论】：

标签： javascript css reactjs material-ui datepicker

【解决方案1】：

我在 calendar 图标 (DatePicker Icon Button) 的样式方面遇到了类似的问题。我能够按照这篇文章中的建议修改它：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>

【讨论】：