如何在带Start Adornment的Material UI TextField中让标签置于输入文本上方？

要实现带Start Adornment时标签始终在输入文本上方的效果，核心是强制标签保持"收缩"状态并调整其位置，避免被装饰元素遮挡。以下是两种可行方案：

方案一：使用makeStyles自定义标签样式 #

通过makeStyles创建自定义类，针对带有Start Adornment的场景调整标签位置，同时强制开启shrink属性：

import { makeStyles } from '@mui/styles';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import AccountCircle from '@mui/icons-material/AccountCircle';

const useStyles = makeStyles({
  // 调整标签位置，避开Start Adornment
  adornedLabel: {
    transform: 'translate(14px, -9px) scale(0.75)',
    transformOrigin: 'top left',
    // 根据Start Adornment的实际宽度调整left值，示例中Icon宽度约40px，预留48px避免遮挡
    left: '48px',
  },
});

export default function TextInput({ startAdornment, ...props }) {
  const classes = useStyles();
  const inputLabelProps = startAdornment 
    ? {
        shrink: true, // 强制标签保持收缩状态（在上方）
        className: classes.adornedLabel,
      }
    : {};

  return (
    <TextField
      InputLabelProps={inputLabelProps}
      InputProps={{ startAdornment }}
      {...props}
    />
  );
}

// 使用示例
<TextInput
  label="用户名"
  variant="outlined"
  startAdornment={
    <InputAdornment position="start">
      <AccountCircle />
    </InputAdornment>
  }
/>

方案二：使用styled组件封装TextField #

通过styled组件根据是否存在Start Adornment动态注入样式，更具可维护性：

import styled from '@mui/material/styles/styled';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import AccountCircle from '@mui/icons-material/AccountCircle';

const StyledTextField = styled(TextField)(({ hasAdornment }) => ({
  '& .MuiInputLabel-root.MuiInputLabel-shrink': {
    left: hasAdornment ? '48px' : '0',
    transform: 'translate(14px, -9px) scale(0.75)',
    transformOrigin: 'top left',
  },
}));

export default function TextInput({ startAdornment, ...props }) {
  return (
    <StyledTextField
      hasAdornment={!!startAdornment}
      InputProps={{ startAdornment }}
      {...props}
    />
  );
}

// 使用示例
<TextInput
  label="用户名"
  variant="outlined"
  startAdornment={
    <InputAdornment position="start">
      <AccountCircle />
    </InputAdornment>
  }
/>

关键说明 #

1. 为什么之前调整shrink无效？
   默认开启shrink后，标签的left值仍为0，会被Start Adornment遮挡。必须同时调整left属性，让标签避开装饰元素的位置。

2. 调整left值的技巧
   可以通过浏览器开发者工具查看输入框的padding-left值（通常是Start Adornment宽度 + 输入框默认内边距），以此为基准设置标签的left值，确保对齐准确。

3. 保持默认样式一致性
   标签的transform属性复制了Material UI默认收缩状态的样式，避免自定义样式破坏原有设计风格。

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