使用为 MUI X 日期选择器设计的 Material UI

Question

我想自定义日期选择器并尝试从 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>
  );
};

Answer 1

使用

sx={{}}

道具

<DateDisplay
   value={new Date()}
   readOnly
   onChange={() => {}}
   renderInput={(params) => (
      <TextField 
         {...params} 
         sx={{
            '.MuiInputBase-input': {padding: 0},
         }}
      />
   )}
></DateDisplay>

使用“.MuiInputBase-input”类，您可以为 DatePicker 自定义

<TextField>

渲染输入。