作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
首先 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>
)
}}
现场演示
关于css - 如何更改 Material-UI TextField InputAdornment 背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69554151/
使用 React,我有一个 MUI 多行 FieldText,其中有几个右对齐的 inputAdornment 图标。 当我填写它时,框会为每一行更改其高度,并且图标在中间垂直居中。 我试图让图标在顶
首先 10% 一种背景颜色,另外 90% 是另一种背景颜色。 ) }} /> 我在下面附上演示文本字段 最佳答案 这就是你如何覆盖 InputAdornm
在 Material-UI v1 中,我试图避免如果用户在使用 InputAdornment 输入输入时按 Tab 键,则后者将获得焦点。相反,我想要实现的是通过按 Tab 键选择后续输入。 有人建议
我是一名优秀的程序员,十分优秀!