React使用Material UI(MUI)如何调整TextField的label到右侧且无动画异常

你可以通过关闭TextField自带的label浮动动效，再自定义布局的方式实现需求，不需要修改MUI底层逻辑，两种常用实现方式如下：

方法1：复用TextField内置label（改动最小） #

直接通过组件属性关闭动效、调整定位即可：

• 给InputLabelProps设置disableAnimation: true关闭动效，shrink: false固定label状态不浮动
• 自定义样式覆盖label的默认左定位，改成右定位
• 隐藏输入框默认的legend缺口，避免边框断裂
  参考代码：

import TextField from '@mui/material/TextField';

const RightLabelTextField = () => {
  return (
    <TextField
      label="你的标签内容"
      variant="outlined"
      InputLabelProps={{
        shrink: false,
        disableAnimation: true,
        sx: {
          right: 14,
          left: 'auto', // 覆盖默认left值
          '&.Mui-focused, &.MuiFormLabel-filled': {
            // 聚焦、有输入值时也保持位置不变
            right: 14,
            left: 'auto',
          }
        }
      }}
      sx={{
        '& .MuiOutlinedInput-root': {
          paddingRight: '70px', // 根据标签长度调整，留出足够空间
          '& fieldset legend': {
            display: 'none', // 隐藏默认的label对应边框缺口
          }
        }
      }}
    />
  )
}

方法2：拆分组件单独写label（灵活度更高） #

如果后续需要自定义更多标签样式，也可以不使用TextField内置的label属性，单独组合组件实现：

import { Box, TextField, InputLabel } from '@mui/material';

const RightLabelTextField = () => {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <TextField variant="outlined" sx={{ flex: 1 }} />
      <InputLabel sx={{ position: 'static', whiteSpace: 'nowrap' }}>你的标签内容</InputLabel>
    </Box>
  )
}

如果使用outlined变体，第一种方案隐藏legend后输入框边框为完整线条，刚好匹配示例图中的效果，不会出现标签位移问题

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