如何修改Material-UI TextField的InputAdornment分段背景颜色？

核心通过CSS线性渐变实现分段背景，无需额外新增DOM元素，也不会破坏Material-UI原有组件的交互逻辑，修改代码如下：

第一步：定义自定义样式 #

以Material-UI v4 makeStyles 为例，v5可对应替换为styled写法，核心逻辑一致：

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

const useStyles = makeStyles({
  textFieldRoot: {
    '& .MuiOutlinedInput-root': {
      // 前10%背景色可自行替换，示例用浅青色#e0f7fa，剩余90%为白色
      background: 'linear-gradient(to right, #e0f7fa 0%, #e0f7fa 10%, #ffffff 10%, #ffffff 100%)',
      borderRadius: '50px',
      backgroundColor: 'transparent !important',
      // 调整输入框内边距，避免文字覆盖左侧10%区域
      '& input': {
        paddingLeft: 'calc(10% + 14px)'
      },
      // 左侧图标区域适配10%宽度，居中显示图标
      '& .MuiInputAdornment-positionStart': {
        position: 'absolute',
        left: 0,
        width: '10%',
        justifyContent: 'center'
      }
    }
  }
});

第二步：修改TextField组件代码 #

// 组件内调用样式
const classes = useStyles();

<TextField
  className={classes.textFieldRoot}                  
  type="text"
  placeholder="username"
  variant="outlined"
  fullWidth // 建议开启，百分比宽度会按输入框实际宽度自适应
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <PersonIcon />
      </InputAdornment>
    )
  }}
/>

关键说明 #

• 线性渐变的色标设置为同一位置（10%），可以实现无过渡的硬分割效果，符合分段背景需求
• 调整了InputAdornment的定位和宽度，保证图标刚好在左侧10%区域居中
• 原有代码中borderRadius: '50'缺少单位，修正为50px可实现胶囊型圆角效果
• 可以根据需求自行修改渐变里的两个颜色值，以及分割占比参数

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