![](/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.