Material UI v4 outlined类型TextField设置左侧起始图标后不显示问题求解

问题原因 #

你自定义notchedOutline样式后，输入框轮廓容器的层级高于内部的InputAdornment组件，导致图标被视觉遮挡，所以可以在DOM中找到节点但页面不可见。

解决方案 #

按以下两步调整即可：

1. 调整自定义样式的层级，降低轮廓的z-index，或者提高起始装饰元素的z-index
2. 给嵌入的图标设置明确的尺寸，避免因尺寸过大被溢出隐藏

样式调整示例

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  textField: {
    '& .MuiOutlinedInput-notchedOutline': {
      borderRadius: '12px', // 保留你原来自定义的圆角等样式
      zIndex: 0, // 新增：降低轮廓层级，避免遮挡内部元素
    },
    // 可选：强制提高起始装饰的层级，双重保险
    '& .MuiInputAdornment-positionStart': {
      zIndex: 1,
    }
  }
});

组件代码调整示例

import { TextField, InputAdornment } from "@material-ui/core";

// 组件内部使用
<TextField
    variant="outlined"
    InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <img 
              src={someImage} 
              style={{ width: 20, height: 20, objectFit: 'contain' }} // 给图标设置明确尺寸，避免溢出隐藏
            />
          </InputAdornment>
        )
    }}
    classes={{
      root: classes.textField,
    }}
    fullWidth
/>

额外排查点 #

如果调整后仍未显示，检查你是否自定义修改了MuiOutlinedInput-input的padding属性，如果手动改了左侧padding，需要留出足够空间容纳起始装饰图标。

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