为 mui-x datepicker 使用 mui 样式

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

您可以检查日期选择器元素并查看其应用的 classes。

然后使用 class 在您的“样式化”元素中命名，您可以自定义您的 mui 元素。为了清楚起见，我附上了检查。对于这张照片，它将是：

const DateDisplay = styled(DesktopDatePicker)(({ theme }) => ({
  '& .css-1uvydh2':{
   padding: 0,
  },
}));

如果还是不行，试试 sx={{}} prop.

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

使用'.MuiInputBase-input'class，您可以为您的 DatePicker 自定义 <TextField> 呈现输入。（您也可以在图片中看到它）

为 mui-x datepicker 使用 mui 样式

Use mui styled for mui-x datepicker

reactjs

material-ui

datepicker