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

Question

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

这种样式会导致类似下面的内容，它会阻止在自动完成的末尾放置一个按钮。

但我想要下面这样的东西。

我添加此按钮的方式是覆盖自动完成文本字段的 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}
        </>
      ),
    }}
  />
)}

有什么办法吗？

Answer 1

当检查 Autocomplete 元素时，您可以看到有一个巨大的 padding-left 应用于 Autocomplete-inputRoot 元素，推开您正在使用的 TextField 元素作为 renderInput。因此，您需要覆盖该填充。要移动自动完成 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);

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

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

Re-Position material autocomplete popup icon

reactjs

material-ui

react-material