我想定制日期选择器，并试图从mui-x日期选择器的输入中删除填充，但没有任何工作。我在这里做错了什么，或者样式不支持mui-x？

import { styled } from '@mui/material/styles';
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { TextField } from '@mui/material';

const DateDisplay = styled(DesktopDatePicker)(({ theme }) => ({
  '& input':{
   padding: 0,
},
}));

  return (
    <ModalDialog>
      <div>
        
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DateDisplay
            value={new Date()}
            readOnly
            onChange={() => {}}
            renderInput={(params) => <TextField {...params} />}
          ></DateDisplay>
        </LocalizationProvider>
      </div>
    </ModalDialog>
  );
};