reactjs - Material-UI Autocomplete 向左移动清除并弹出图标位置

Question

我们尝试实现自动完成文本字段。清除和弹出图标总是从右侧出现（结束装饰）。

我们有一个使用 rtl 方向的选项，但我们找不到翻转这个组件的方法：

1. 将清除/弹出图标放在开始装饰中。
2. 更改将结束装饰设置到字段左侧的方向

有没有人找到办法做到这一点？

标签： reactjsmaterial-ui

Answer 1

的清除和弹出图标按钮Autocomplete是硬编码在endAdornmentprop 中的，无法使用公共 API 更改它，但您可以使用以下解决方法交换它：

export default function Demo() {
  return (
    <Autocomplete
      options={top100Films.map((option) => option.title)}
      renderInput={(params) => {
        return (
          <TextField
            {...params}
            InputProps={{
              ...params.InputProps,
              startAdornment: (
                <div>{params.InputProps.endAdornment.props.children}</div>
              ),
              endAdornment: null
            }}
            label="freeSolo"
          />
        );
      }}
    />
  );
}

现场演示