Material UI v5 如何调整输入框浮动标签的fontSize？

MUI v5 已重构输入框标签的样式计算逻辑，不再使用v4版本的硬编码偏移规则，可直接通过主题配置或组件属性修改浮动标签字体大小，框架会自动适配浮动状态下的轮廓缺口/背景遮挡区域，无需手动计算调整。

方案1：全局统一配置（推荐全项目统一规范场景） #

通过createTheme全局覆盖组件样式，所有输入框都会生效：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    // 配置输入框标签样式
    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: '16px', // 未聚焦时标签默认字体大小
          '&.MuiInputLabel-shrink': {
            fontSize: '12px', // 浮动状态下的标签字体大小
          }
        }
      }
    },
    // 可选：同步配置输入框内文字大小
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          fontSize: '16px'
        }
      }
    }
  }
});

// 用自定义主题包裹你的应用根组件即可全局生效
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 应用其余组件 */}
    </ThemeProvider>
  );
}

方案2：单个组件单独调整（适合局部差异化场景） #

通过sx属性直接给单个TextField组件写样式，不影响全局其他输入框：

<TextField
  label="测试标签"
  variant="outlined"
  sx={{
    '& .MuiInputLabel-root': {
      fontSize: '16px',
      '&.MuiInputLabel-shrink': {
        fontSize: '12px'
      }
    },
    '& .MuiOutlinedInput-root': {
      fontSize: '16px'
    }
  }}
/>

补充说明 #

• 如果你使用的是filled/standard变体的输入框，只需要把上面代码中的MuiOutlinedInput替换为对应组件名（MuiFilledInput/MuiInput）即可，遮挡区域的适配逻辑框架会自动处理。
• 若出现罕见的轮廓缺口对齐误差，可通过给InputLabel添加shrink属性强制触发浮动状态调试即可。

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