[英]How to change Material-UI TextField InputAdornment background color?
First 10% one background color ,another 90% another background color.首先 10% 一种背景颜色,另外 90% 是另一种背景颜色。
<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我在下面附上演示文本字段
This is how you override the InputAdornment
to achieve the same effect in your screenshot.这是您覆盖
InputAdornment
以在屏幕截图中实现相同效果的方式。 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.请注意,
InputAdornment
旁边的input
将其box-sizing
设置为content-box
,因此它不像在装饰中将height
设置为100%
那样简单。 I had to copy the padding code here to make sure the height of the adornment is the same as the height of the OutlinedInput
:我必须在这里复制填充代码以确保装饰的高度与
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 V5
V4 V4
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>
)
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.