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

Posted 2023-02-22

【中文标题】重新定位材料自动完成弹出图标

【英文标题】：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
        </>
      ),
    
  />
)

有什么办法吗？

【参考方案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);

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