htmlcssreactjswebmaterial-ui

reduce size of MUI datepicker

enter image description here

I am using MUI date picker in list of data I want to reduce height of input filed and make close date and calendar icon as date and calendar icon are taking much space between and there is background in oval shape which has large width and height I have removed border of picker

fieldset MuiOutlinedInput notchedOutline

Solution

  • To achieve these modifications, try to make these styles:

    /* Reduce the height of the input field */
.MuiOutlinedInput-input {
  padding-top: 10px; /* Adjust as needed */
  padding-bottom: 10px; /* Adjust as needed */
}

/* Adjust the spacing between the close date and calendar icons */
.MuiPickersDay-dayButtonStart {
  margin-left: 8px; /* Adjust as needed */
}

/* Modify the oval-shaped background */
.MuiPickersStaticWrapper-root {
  width: 200px; /* Adjust the width as needed */
  height: 200px; /* Adjust the height as needed */
  border-radius: 100px; /* To make it perfectly oval, set the border-radius to half of the width/height */
}