title: How to style adornment in MUI TextField?
body: <p>I am trying to add just the default 14px padding-left set by <code>startAdornment</code> and want to make it so the adornment takes up half of the <code>TextField</code> instead. I can't seem to figure out how to style the <code>startAdornment</code> in general.</p>
  <p>I tried style the div itself, this works but there is still an underlying 14px padding left. I tried styling the <code>InputAdornment</code> itself but it seems to have no effect.</p>
  <pre><code>InputProps={
      this.state.didChange[rowIndex] ? {
          startAdornment: (
              &lt;InputAdornment
                  position=&quot;start&quot;
                  component=&quot;div&quot;
                  style={{paddingLeft: '-14px'}}
                  disablePointerEvents&gt;
                  &lt;div style={{ backgroundColor: '#D3D4D0', marginLeft: '-14px', padding: &quot;10px 13px&quot;, width: &quot;26px&quot;, color: '#a1a39b' }}&gt;
                      {prevVals[rowIndex]}
                  &lt;/div&gt;
              &lt;/InputAdornment&gt;
          )
      } : null} /&gt;
  </code></pre>
  <p>This is the result of my current code:</p>
  <p><a href="https://i.stack.imgur.com/Guov0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Guov0.png" alt="enter image description here" /></a></p>
  <p>This is what I want:</p>
  <p><a href="https://i.stack.imgur.com/ssRHo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ssRHo.png" alt="enter image description here" /></a></p>
  <p>You can ignore the border color difference that doesn't matter I can change that.</p>