如何正确修改React Material UI v4 TextField组件高度

原有写法的问题 #

直接给InputProps.classes.input设置minHeight: 42px时，仅修改了内部输入框的高度，没有同步调整输入组件外层容器、输入标签的定位逻辑，会导致标签和输入框位置错位、重叠，异常效果如下：

简单可落地的实现方案 #

方案1：自定义样式精准控制42px高度（适配所有变体） #

通过makeStyles同时覆盖外层容器、内部输入框、标签的关联样式，从根源避免错位，代码可直接复用：

export const useTextFieldStyles = makeStyles({
  // TextField根容器样式
  textFieldRoot: {
    minHeight: '42px',
    // 同步调整未激活状态下的标签位置
    "& .MuiInputLabel-root": {
      transform: 'translate(14px, 10px) scale(1)',
    },
    // 同步调整聚焦/有值状态下的上浮标签位置
    "& .MuiInputLabel-root.Mui-focused, & .MuiInputLabel-root.MuiInputLabel-shrink": {
      transform: 'translate(14px, -6px) scale(0.75)',
    }
  },
  // 输入框本体样式
  inputInner: {
    minHeight: '42px',
    boxSizing: 'border-box',
    padding: '8px 14px',
  }
});

// 组件使用示例
<TextField
  {...params}
  margin="dense"
  value={listItem}
  className={textFieldStyles.textFieldRoot}
  InputProps={{
    classes: {
      input: textFieldStyles.inputInner,
    },
  }}
/>

提示：如果使用outlined/filled/standard不同风格的输入框，可根据实际视觉效果微调padding数值，避免文字和边框、前缀后缀元素重叠。

方案2：使用内置size属性（零自定义样式） #

如果不需要严格卡死42px的精确高度，可直接使用MUI v4内置的小尺寸配置，默认高度约40px，和42px视觉差异极小，不需要写任何自定义样式：

<TextField
  {...params}
  size="small"
  margin="dense"
  value={listItem}
/>

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