如何使用MUI v5实现标签内嵌边框的输入框设计？

要实现标签始终位于输入框边框内部的效果，可以通过自定义MUI的样式覆盖默认行为，以下是具体实现方案：

实现思路 #

• 重写TextField组件中标签的定位样式，取消默认的聚焦时上移缩放逻辑
• 调整输入框内边距，避免输入文本与标签重叠

代码示例 #

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

// 自定义样式的输入框组件
const InnerLabelTextField = styled(TextField)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    // 增加顶部内边距，避免文本和标签重叠
    paddingTop: theme.spacing(1.5),
    '& .MuiOutlinedInput-input': {
      padding: '10.5px 14px',
    },
  },
  '& .MuiInputLabel-root': {
    // 固定标签在输入框内部左上角
    top: 0,
    left: 0,
    transform: 'translate(14px, 10px) scale(1)',
    // 聚焦状态下保持标签位置和大小不变
    '&.Mui-focused': {
      transform: 'translate(14px, 10px) scale(1)',
      color: theme.palette.text.secondary,
    },
  },
  // 取消标签收缩时的位移和缩放
  '& .MuiInputLabel-shrink': {
    transform: 'translate(14px, 10px) scale(1)',
  },
}));

// 使用示例
function DemoComponent() {
  return (
    <InnerLabelTextField
      label="邮箱地址"
      variant="outlined"
      fullWidth
      placeholder="请输入邮箱"
    />
  );
}

export default DemoComponent;

样式说明 #

• 通过styled组件修改MUI内置类的样式，确保标签始终处于输入框内部
• 调整输入框和输入文本的内边距，保证内容布局合理
• 覆盖聚焦和收缩状态下的标签样式，维持统一的视觉效果

你可以根据设计需求，调整translate的数值和内边距大小，适配不同的输入框尺寸

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