我試圖減少MUI自動完成中輸入字段的大小，但是我做不到。 我試過這個代碼:

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>

但是我得到的輸出是這樣的:

所以請幫我解決這個問題。提前感謝。

你可以簡單地用這個:

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

另一個選項是對renderInput中的TextField使用multiline和rows屬性:

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