首先 10% 一种背景颜色,另外 90% 是另一种背景颜色。
<TextField
className={classes.root}
type="text"
placeholder="username"
variant="outlined"
style={{borderRadius:'50',
backgroundColor: "white"
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PersonIcon />
</InputAdornment>
)
}}
/>
我在下面附上演示文本字段最佳答案
这就是你如何覆盖 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
关于css - 如何更改 Material-UI TextField InputAdornment 背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69554151/