如何自定义Material UI TextField的startAdornment样式

我明白你现在遇到的困扰了——Material-UI TextField的startAdornment自带的14px左内边距确实挺顽固，直接调整InputAdornment自身样式往往不生效，而用负margin抵消又会留下底层的内边距问题。其实问题的根源在于默认内边距是来自TextField内部的Input组件，而非InputAdornment本身，咱们可以从这两点入手解决：

具体解决方案 #

1. 移除Input组件的默认左内边距 #

TextField的Input部分默认有padding-left: 14px的样式，这就是你说的“底层14px左内边距”的来源。咱们可以直接在InputProps里设置style来覆盖这个默认值：

InputProps={{
  style: { paddingLeft: 0 }, // 移除Input默认的左内边距
  // ...其他配置
}}

2. 让startAdornment占据TextField宽度的一半 #

直接给InputAdornment设置width: '50%'，同时让内部的装饰元素占满这个宽度，就能实现占比一半的效果，不需要再用负margin来抵消内边距了。

修改后的完整代码 #

InputProps={
  this.state.didChange[rowIndex] ? {
    style: { paddingLeft: 0 }, // 移除Input默认左内边距
    startAdornment: (
      <InputAdornment position="start" component="div" style={{ width: '50%' }} disablePointerEvents>
        <div style={{ 
          backgroundColor: '#D3D4D0', 
          padding: "10px 13px", 
          width: '100%', // 占满InputAdornment的宽度
          color: '#a1a39b',
          boxSizing: 'border-box' // 确保padding不会超出宽度
        }}>
          {prevVals[rowIndex]}
        </div>
      </InputAdornment>
    )
  } : null
}

代码解释 #

• style: { paddingLeft: 0 }：直接覆盖Input组件的默认左内边距，彻底消除底层的14px间距。
• InputAdornment的style={{ width: '50%' }}：让装饰容器占据TextField宽度的一半。
• 内部div设置width: '100%'和boxSizing: 'border-box'：确保装饰元素完全填充InputAdornment的宽度，同时padding不会导致元素超出范围。

这样调整后，就能完美移除默认内边距，同时让装饰元素准确占据TextField宽度的一半啦～

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