如何将Material-UI Autocomplete的清除与弹窗图标移至左侧

以下方案针对主流带adornment配置的UI组件库（以Material UI为例，其他组件库逻辑通用）：

方案1：组件属性配置（推荐，无样式冲突） #

• 先隐藏组件默认生成的end位置清除、弹窗图标，再手动将自定义图标插入start adornment区域，示例代码如下：

<Autocomplete
  // 保留原有业务属性
  slots={{
    // 隐藏默认的end位置图标
    clearIndicator: () => <></>,
    popupIndicator: () => <></>
  }}
  InputProps={{
    startAdornment: (
      <>
        {/* 自定义插入清除、弹窗图标到start位置 */}
        <IconButton onClick={handleClearInput}>
          <ClearIcon />
        </IconButton>
        <IconButton onClick={togglePopup}>
          <ArrowDropDownIcon />
        </IconButton>
      </>
    )
  }}
/>

• 给输入框外层容器添加direction: rtl样式，此时组件原生的end adornment会自动渲染到输入框左侧，和LTR场景下的位置完全互换。

方案2：CSS覆盖调整（无侵入，适配成本低） #

如果不想修改组件结构，直接通过样式强制调整位置即可：

• 给Autocomplete组件加自定义类名rtl-autocomplete，添加如下CSS规则：

/* 将默认end位置的图标移到左侧 */
.rtl-autocomplete .MuiInputAdornment-positionEnd {
  right: auto;
  left: 8px; /* 可按需调整边距 */
}
/* 调整输入框内边距，避免文字和左侧图标重叠 */
.rtl-autocomplete .MuiInputBase-input {
  padding-left: 60px; 
  padding-right: 12px;
}

其他组件库的适配逻辑完全一致：优先找组件库内置的adornment位置配置项，没有配置项的话就隐藏默认图标手动插入到对应位置，再配合CSS调整输入框内边距即可，不需要依赖组件库的内置RTL适配逻辑。

内容的提问来源于stack exchange，提问作者ByndBeyond