如何为MUI DatePicker组件的Calendar添加样式并对齐TextField右侧

你需要调整DatePicker内置Popper的定位逻辑，以下是两种可行的解决方案：

方案一：通过Popper对齐属性实现原生对齐 #

利用MUI Popper的placement属性指定对齐方向，配合transformOrigin确保日历以正确原点定位，这种方法更贴合MUI组件的设计逻辑：

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function BasicDatePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => <TextField {...params} />}
        PopperProps={{
          // 指定弹窗在输入框底部靠右对齐
          placement: 'bottom-end',
          sx: {
            '& .MuiPickersPopper-paper': {
              // 设置变换原点为日历右上角，确保对齐逻辑正确
              transformOrigin: 'top right',
              // 调整日历与输入框的垂直间距
              marginTop: '4px',
              // 移除默认左间距避免偏移
              marginLeft: 0
            }
          }
        }}
      />
    </LocalizationProvider>
  );
}

方案二：绝对定位强制对齐 #

如果方案一无法满足需求，可直接通过绝对定位强制让日历右侧与父容器对齐：

<DatePicker
  label="Basic example"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  renderInput={(params) => <TextField {...params} />}
  PopperProps={{
    sx: {
      '& .MuiPopper-root': {
        position: 'absolute',
        // 垂直方向与输入框底部对齐，可根据需求调整间距
        top: 'calc(100% + 4px)',
        // 强制右侧与父容器对齐
        right: 0
      },
      '& .MuiPickersPopper-paper': {
        position: 'relative',
        right: 0
      }
    }
  }}
/>

之前方法无效的原因 #

• 你使用的MuiPickersPopper-root不是正确的根类名，MUI Popper的根类应为MuiPopper-root；
• Styled-components样式无法穿透到挂载在body下的Popper组件，受样式作用域限制；
• 给TextField添加容器或justify-content属性不会影响日历定位，因为日历通过Popper挂载在独立层级，与TextField不在同一渲染上下文。

内容的提问来源于stack exchange，提问作者Happy1234