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

【问题标题】：How to reduce the height of Autocomplete component of Material UI?如何降低 Material UI 的 Autocomplete 组件的高度？
【发布时间】：2020-01-26 11:18:17
【问题描述】：

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

【问题讨论】：

标签： material-ui

【解决方案1】：

我也在自定义Autocomplete 组件。

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

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

确保不要覆盖 TextField 组件上的自动完成组件提供的 params，其中已经包含 InputProps 之类的内容。

您可能希望使用Autocomplete's 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" />}
  />
  )
}

【讨论】：

【解决方案2】：

尝试通过 css 设置输入高度

.MuiInputBase-input {
  height: 1.5rem;
}

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

【讨论】：

【解决方案3】：

我同意@H.Hattab。对于使用styled-components 的任何人，这里是示例

const AutoComplete = styled(Autocomplete)`
  & .MuiInputBase-input {
    height: 1.5rem;
  }
`;

【讨论】：