如何更改Material UI的日期选择器的填充？

Question

Here是codeandbox链接

function InlineDatePickerDemo(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          style={{ padding: "20px" }}
          autoOk
          variant="inline"
          inputVariant="outlined"
          label="With keyboard"
          format="MM/dd/yyyy"
          value={selectedDate}
          InputAdornmentProps={{ position: "start" }}
          onChange={(date) => handleDateChange(date)}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}

我想减少日期选择器框内的间距，但是提供自定义样式不会影响

我很想知道为什么风格不起作用以及解决该问题的方法是什么。

Answer 1

您所做的是样式父组件。为了更改选择器内部组件之间的间距，您需要在子组件中覆盖以下类：

const useStyles = makeStyles({
  root: {
    "& .MuiInputBase-root": {
      padding: 0,
      "& .MuiButtonBase-root": {
        padding: 0,
        paddingLeft: 10
      },
      "& .MuiInputBase-input": {
        padding: 15,
        paddingLeft: 0
      }
    }
  }
});

const classes = useStyles();

return (
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
      className={classes.root}
      {...}
    />
  </MuiPickersUtilsProvider>
);

实时演示