CODEWITHSUNDEEP
cssreactjsmaterial-uidatepicker
Dev AKS
Dev AKS

Reputation: 532

How to change padding of Material UI's datepicker?

Here is the 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>
  );
}

I want to reduce the gapping inside the date-picker box but giving custom styles is not affecting.

I am curious to know why style is not working and what could be the solution for such problem.

Upvotes: 2

Views: 10539

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81723

What you did is styling the parent component. In order to change the spacing between the components inside the picker, you need to override the following classes in the 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>
);

Live Demo

Edit 64336432/how-to-change-padding-of-material-uis-datepicker

Upvotes: 7

Related Questions