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

Question

首先 10% 一种背景颜色，另外 90% 是另一种背景颜色。

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

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

Answer 1

这就是你如何覆盖 InputAdornment在您的屏幕截图中实现相同的效果。请注意 input旁边InputAdornment有它的 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>
    )
  }}

现场演示
V5

V4