gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 14:02:32 26 4
gpt4 key购买 nike

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

<TextField
className={classes.root}
type="text"
placeholder="username"
variant="outlined"
style={{borderRadius:'50',
backgroundColor: "white"
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PersonIcon />
</InputAdornment>
)
}}
/>
我在下面附上演示文本字段
enter image description here

最佳答案

这就是你如何覆盖 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
Codesandbox Demo
V4
Codesandbox Demo

关于css - 如何更改 Material-UI TextField InputAdornment 背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69554151/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com