如何更改 Material-UI TextField InputAdornment 背景颜色？答案

【问题标题】：How to change Material-UI TextField InputAdornment background color?如何更改 Material-UI TextField InputAdornment 背景颜色？
【发布时间】：2021-12-01 20:29:38
【问题描述】：

前 10% 的一种背景颜色，另外 90% 的另一种背景颜色。

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

我在下面附上演示文本字段

【问题讨论】：

标签： css reactjs material-ui textfield

【解决方案1】：

这是您覆盖InputAdornment 以在屏幕截图中实现相同效果的方式。请注意，InputAdornment 旁边的input 将其box-sizing 设置为content-box，因此它不像在装饰中将height 设置为100% 那样简单。我必须复制填充代码here 以确保装饰的高度与OutlinedInput 的高度相同：

<TextField
  placeholder="With normal TextField"
  sx={{
    "& .MuiOutlinedInput-root": {
      paddingLeft: 0
    }
  }}
  InputProps={{
    startAdornment: (
      <InputAdornment
        sx={{
          padding: "27.5px 14px",
          backgroundColor: (theme) => theme.palette.divider,
          borderTopLeftRadius: (theme) =>
            theme.shape.borderRadius + "px",
          borderBottomLeftRadius: (theme) =>
            theme.shape.borderRadius + "px"
        }}
        position="start"
      >
        kg
      </InputAdornment>
    )
  }}

现场演示

【讨论】：

我怎样才能获得它的材料 ui 4
@SmackAlpha 我刚刚添加了 v4 Codesandbox。
非常感谢... :)

【解决方案2】：

您可以通过简单的方式做到这一点。试试这个

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>
                )
              }}

【讨论】：