如何修改Material UI Autocomplete组件的下划线动画为从左至右展开效果

问题根源 #

transformOrigin（动画过渡原点）是控制输入框焦点下划线展开方向的核心属性。原生TextField（包括表单内的Password字段）默认将该属性设置为输入框左边缘定位，因此呈现从左向右的展开动效；但Autocomplete组件在透传底层输入框逻辑时，会继承组件库默认的伪元素定位规则，将焦点下划线的过渡原点设置为元素水平中心，最终呈现从中间向两侧扩散的动画效果。

可落地实现方案 #

• 单组件定制（仅调整Faculdade字段的动画效果）
  直接在Autocomplete嵌套的TextField入参中，通过sx属性覆写焦点态下划线的动画原点属性，无需改动其他全局逻辑：

  <Autocomplete
    // 保留原有业务配置
    renderInput={(params) => (
      <TextField
        {...params}
        label="Faculdade"
        sx={{
          // 选中焦点态下划线元素，修正动画原点
          "& .MuiInput-underline:after": {
            transformOrigin: "left bottom",
          },
        }}
      />
    )}
  />
  

• 全局统一配置（适配所有使用下划线输入的MUI组件）
  如果项目内多处Autocomplete需要匹配统一的动画逻辑，可在自定义MUI主题中全局覆写组件样式，让所有输入组件的下划线动画和Password字段完全对齐：

  import { createTheme, ThemeProvider } from "@mui/material/styles";
  
  const globalTheme = createTheme({
    components: {
      MuiInput: {
        styleOverrides: {
          root: {
            "&:after": {
              // 强制设置动画原点为左边缘
              transformOrigin: "left bottom",
            },
          },
        },
      },
    },
  });
  

注意事项 #

• 如果你的Autocomplete使用的是Outlined描边变体输入框，仅需要将上述样式选择器替换为.MuiOutlinedInput-notchedOutline，对应设置transformOrigin: "left top"即可，动画逻辑和下划线变体完全一致。
• 该调整不会改动下划线的颜色、过渡时长、交互触发逻辑，仅修正动画展开方向，可完全匹配原生TextField的Password字段动效。

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