![](/img/trans.png)
[英]How to change color of arrow in TextField Select from material-ui
[英]How to change Material-UI TextField InputAdornment 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>
)
}}
/>
我在下面附上演示文本字段
这是您覆盖InputAdornment
以在屏幕截图中实现相同效果的方式。 请注意, InputAdornment
旁边的input
将其box-sizing
设置为content-box
,因此它不像在装饰中将height
设置为100%
那样简单。 我必须在这里复制填充代码以确保装饰的高度与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
你可以用简单的方式做到这一点。试试这个
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.