How to change Material-UI TextField InputAdornment background color?-CodePudding

First 10% one background color ,another 90% another background color.

<TextField
  className={classes.root}                  
  type="text"
  placeholder="username"
  variant="outlined"
  style={{borderRadius:'50',
    backgroundColor: "white"
  }}
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <PersonIcon />
      </InputAdornment>
    )
  }}
/>

I attach demo textfield in below

CodePudding user response：

This is how you override the InputAdornment to achieve the same effect in your screenshot. Note that the input next to the InputAdornment has its box-sizing set to content-box, so it's not as simple as setting the height to 100% in the adornment. I had to copy the padding code

CodePudding user response：

You can do this in simple way .Try this one

InputProps={{
                startAdornment: (
                  <div style={{display:'flex',flexDirection:'column',justifyContent:'center',alignContent:'center', backgroundColor:'#E1E8EB',height:55,width:50,marginLeft:-13,border:'0px solid green',marginRight:5}}>
                  <InputAdornment position="start">
                    
                    <VpnKeyIcon style={{marginLeft:10}} />
                    
                  </InputAdornment>
                  </div>
                )
              }}