如何正确修改MUI TextField标签字体大小？聚焦时标签挤压问题求解

当你通过InputLabelProps修改标签字体大小后，聚焦时浮动的标签（对应DOM里的<legend>元素）未同步调整样式，导致挤压。可通过以下方法解决：

方法一：用sx属性直接覆盖所有状态样式 #

在TextField上通过sx属性，同时设置默认状态和聚焦收缩状态的标签样式，以及内部legend元素的样式：

<TextField
  {...params}
  label="Hovedkategori"
  sx={{
    '& .MuiInputLabel-root': {
      color: '#518eb9',
      fontSize: 18,
      fontWeight: 1000,
      // 覆盖聚焦收缩后的标签样式
      '&.MuiInputLabel-shrink': {
        fontSize: 18,
        fontWeight: 1000,
        // 调整legend内文字的样式，避免挤压
        '& + .MuiInput-root legend span': {
          fontSize: 18,
          padding: '0 4px',
        }
      }
    }
  }}
/>

方法二：自定义InputLabel组件复用样式 #

如果需要在多个TextField中复用该样式，可以封装自定义InputLabel组件：

import { InputLabel } from '@mui/material';

const CustomInputLabel = ({ children, ...props }) => (
  <InputLabel
    {...props}
    sx={{
      color: '#518eb9',
      fontSize: 18,
      fontWeight: 1000,
      '&.MuiInputLabel-shrink': {
        fontSize: 18,
        fontWeight: 1000,
        '& + .MuiInput-root legend span': {
          fontSize: 18,
          padding: '0 4px',
        }
      }
    }}
  >
    {children}
  </InputLabel>
);

// 使用自定义组件
<TextField
  {...params}
  label="Hovedkategori"
  InputLabelComponent={CustomInputLabel}
/>

关键说明 #

• 聚焦时的浮动标签由MuiInputLabel-shrink类控制，必须同步修改该状态下的字体大小
• DOM中的<legend>是MUI内部生成的辅助元素，需通过相邻选择器& + .MuiInput-root legend span覆盖其样式，调整字体大小和内边距来避免文字挤压

内容的提问来源于stack exchange，提问作者lucasbbs.dk