How to reduce the height of Autocomplete component of Material UI?

Question

Can anyone help me to reduce the height of Material UI Autocomplete component ? I am trying to use set the height property to 10 or 20 px though the classes property. But it does nothing. Also tried to reduce the height of the Textfield which wrapped by Autocomplete component, but when I tried to reduce the height of the Textfield component through InputProps, then the Items that were to be suggested in Autocomplete area don't display.

Answer 1

I am also customizing the Autocomplete component.

To reduce the height, I used the size attribute and removed the label attribute.

renderInput={(params) => <TextField {...params} variant="standard" size="small" />}

Make sure not to override the params provided by the Autocomplete component on your TextField component, which already include things like InputProps.

You'll probably want to use Autocomplete's CSS API to achieve all the customizations you're looking for. For example,

const useStyles = makeStyles(theme => ({
  inputRoot: {
    color: theme.palette.primary.contrastText,
  },
  popupIndicator: {
    color: theme.palette.primary.contrastText,
  },
  root: {
    padding: `0 ${theme.spacing(1)}px`,
  },
}))

const AutocompleteWrapper = ({
  value,
  onChange,
  options,
}) => {
  const classes = useStyles()

  return (
  <Autocomplete
    classes={classes}
    options={options}
    value={value}
    onChange={onChange}
    renderInput={(params) => <TextField {...params} variant="standard" size="small" />}
  />
  )
}