Material-UI TextField设置label shrink为true时最大宽度被覆盖如何解决

问题根因 #

当你给InputLabelProps传入shrink: true时，Material-UI只会对InputLabel做视觉上的缩放（transform: scale(0.75)），不会改变label元素本身的实际布局宽度。外层的FormControl容器（TextField的根元素）会按照未缩放的label宽度计算自身宽度，最终导致组件整体宽度超出你预设的最大值。
shrink: false时标签不会缩放，所以不会出现布局宽度和视觉宽度不一致的问题。

解决方案 #

你不需要单独修改内部多个元素的样式，只需要在TextField组件上直接绑定样式规则即可，具体规则如下：

1. 给TextField根节点固定你需要的最大宽度、设置宽度占满父容器
2. 给收缩状态的InputLabel额外设置最大宽度为133%，抵消缩放带来的布局宽度溢出（因为缩放比例是0.75，1/0.75≈1.33）

如果你用的是MUI v5内置的sx属性，写法如下：

<TextField
  // 你原本的其他属性
  InputLabelProps={{ shrink: true }}
  sx={{
    width: '100%',
    maxWidth: 300, // 替换为你需要的最大宽度，和浅蓝区域宽度一致即可
    '& .MuiInputLabel-shrink': {
      maxWidth: '133%',
      overflow: 'hidden',
      text-overflow: 'ellipsis'
    }
  }}
/>

如果你用的是MUI v4或者单独的css/less文件，写法如下：

/* 给你的自定义TextField加一个自定义类名，比如custom-text-field */
.custom-text-field {
  width: 100%;
  max-width: 300px; /* 替换为你需要的最大宽度 */
}
.custom-text-field .MuiInputLabel-root.MuiInputLabel-shrink {
  max-width: 133%;
  overflow: hidden;
  text-overflow: ellipsis;
}

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