MUI TextField放大标签字体后边框与标签重叠问题求助

当通过主题配置将MuiInputLabel的字号设置为1rem后，Outlined类型的TextField出现标签与边框重叠，是因为默认的标签定位样式基于默认字号计算，放大字号后需同步调整相关定位参数，以下是完整修复方案：

完整主题配置代码 #

const themeOptions: ThemeOptions = {
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: '1rem', // 自定义标签字号
          // 未聚焦且无值时的标签定位
          '&:not(.Mui-focused):not(.MuiInputLabel-shrink)': {
            top: '50%',
            left: '14px',
            transform: 'translate(-50%, -50%)',
          },
          // 聚焦/有值时的标签样式（收缩状态）
          '&.MuiInputLabel-shrink': {
            fontSize: '1rem',
            top: '-8px',
            transform: 'translate(0, 0)',
          },
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          // 调整输入框内边距，避免标签遮挡输入内容
          '& .MuiOutlinedInput-input': {
            padding: '18.5px 14px',
          },
        },
      },
    },
  },
};

调整说明 #

• 未聚焦且无值的标签：重新设置top、left和transform，确保标签在输入框内居中显示，不与边框重叠
• 聚焦或有值的收缩标签：调整top值让标签完全悬浮在边框上方，同时保持字号一致
• 输入框内边距调整：避免输入内容被标签或边框遮挡，保证输入区域可用性

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