重新定位材料自动完成弹出图标

【问题标题】：Re-Position material autocomplete popup icon重新定位材料自动完成弹出图标
【发布时间】：2021-10-15 12:41:44
【问题描述】：

我正在寻找一种将自定义按钮添加到材料自动完成末尾的方法。问题是弹出图标的样式似乎位于自动完成输入的末尾。

这种风格会导致类似下面的情况，它会阻止在自动完成结束时放置一个按钮。

但我想要类似下面的东西。

我添加此按钮的方式是覆盖自动完成文本字段的 endAdornment。

renderInput={(params) => (
  <TextField
    {...params}
    label={label}
    variant="outlined"
    InputProps={{
      ...params.InputProps,
      endAdornment: (
        <>
          <InputAdornment position="end">
            <IconButton icon="search" style={{ padding: '2px' }} />
          </InputAdornment>
          {params.InputProps.endAdornment}
        </>
      ),
    }}
  />
)}

有什么办法吗？

【问题讨论】：

标签： reactjs material-ui react-material

【解决方案1】：

当检查Autocomplete 元素时，您会看到有一个巨大的padding-left 应用于Autocomplete-inputRoot 元素，它推开您作为renderInput 使用的TextField 元素。因此，您需要覆盖该填充。要移动自动完成popupIcon，您需要覆盖left css 属性

const Autocomplete = withStyles({
  inputRoot: {
    padding: "16px !important",

    '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-endAdornment': {
      left: 32, // probably the width of your search IconButton or more if needed
    },
  },
})(MuiAutocomplete);

请注意，您可以使用这种风格来达到最佳效果。

【讨论】：