如何在 DatePicker 组件 MUI 中将样式应用到日历

Question

我正在使用 Mui 的 DatePicker 组件，我正在尝试通过添加

position:abusolte

、

letf

和“top”属性来设置日历组件的样式。

我的目标是将

TextField

组件的右侧与日历对齐。

这就是现在的样子……

这就是我想要的....

如何向日历添加样式？

这是演示代码

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} />}
      />
    </LocalizationProvider>
  );
}

尝试

1，我添加了

PopperProps

道具但是没有用...

      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
PopperProps={{
  sx: {'&.MuiPickersPopper-root': {position: 'absolute', top:'4px', left:'-23px'}},
}}
      />

2,使用样式组件

export const DatePicker = styled(DesktopDatePicker)`
  & .MuiPickersPopper-paper {
    position: absolute;
    left: -23px;
    top: 4px;
  }
`;

Answer 1

您非常接近可行的解决方案。您必须定位

popper

插槽组件并以这种方式设置它的样式。文档在解释这一点时相当迂回，我花了一段时间才弄清楚。试试这个：

<DatePicker
  ...otherProps
  slotProps={{
    popper: {
      placement: "bottom-end"
    }
  }}
/>