如何降低 Material UI 的 Autocomplete 组件的高度？

Question

谁能帮我降低 Material UI Autocomplete 组件的高度？我试图通过 classes 属性将 height 属性设置为 10 或 20 px。但它什么也不做。还尝试降低由自动完成组件包裹的文本字段的高度，但是当我尝试通过 InputProps 降低文本字段组件的高度时，自动完成区域中建议的项目不显示。

Answer 1

我也在定制该Autocomplete组件。

为了降低高度，我使用了该size属性并删除了该label属性。

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

确保不要覆盖paramsTextField 组件上的自动完成组件提供的内容，该组件已经包含InputProps.

您可能想要使用Autocomplete 的 CSS API来实现您正在寻找的所有自定义。例如，

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" />}
  />
  )
}

Answer 2

尝试通过 css 设置输入高度

.MuiInputBase-input {
  height: 1.5rem;
}

如果你里面有标签 - 你还需要设置它们的高度，否则它们会增加容器的高度