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

Question

Here 是codesandbox link

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

您所做的是设置父组件的样式。为了更改选择器内组件之间的间距，您需要覆盖 sub-components 中的以下类:

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>
);

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

How to change padding of Material UI's datepicker?

css

datepicker

reactjs

material-ui

react-material

现场演示