How to change height of MUI autocomplete Input field

Viewed 41

I am trying to reduce the size of Input field inside MUI autocomplete but I am unable to do it. I tried this code:

styling:
autocompleteStyle: {
    height: '2.3rem',
    color: `${theme.palette.grayDark1} !important`,
    boxShadow: '#fff !important',
    outline: 'none !important',
    borderRadius: '0.1875rem !important',
  },
autocomplete code:
<FormControl sx={{ width: '100%' }}>
        <Autocomplete
          sx={{
            '&& fieldset': {
              height: '2rem !important',
              justifyContent: 'center',
              border: `${isError ? '1.5px solid #DE350B' : '1.5px solid #D4D5D8'}`,
              textOverflow: 'ellipsis',
              overflow: 'hidden',
            },
            '&:hover': {
              '&& fieldset': {
                border: `${isError ? '1.5px solid #DE350B' : '1.5px solid #616E84'}`,
              },
            },
            '&.Mui-focused ': {
              '&& fieldset': {
                border: `${isError ? '1.5px solid #DE350B' : '1.5px solid #3C4C68'}`,
              },
            },
          }}
          className={`${classes.dropdownSelect} h3Medium`}
          value={value}
          onChange={handleChange}
          autoWidth
          displayEmpty
          name={name}
          disablePortal
          options={options}
          renderInput={(params) => <TextField {...params} size="small" placeholder="Select" />}
        />
      </FormControl>

but with this all I am getting output like this: Output image

So please help me in this problem. Thanks in advance.

1 Answers

You can simply use this:

sx={{
  "& .MuiInputBase-root": { height: "200px" },
}}

Another option is using multiline and rows property for the TextField that is inside renderInput:

<Autocomplete
  ...
  renderInput={(params) => (
     <TextField
       {...params}
       multiline
       rows={3}
     />
   )}
/>
Related