如何解决在TextField材质用户界面中调整标签
如何调整TextField的标签,并在Material UI中选择一个项目后出现灰色背景颜色?
请检查此代码和框 CLICK HERE
标签问题
<TextField
variant="outlined"
label="Choose"
style={{
background: "#fff"
}}
InputProps={{
className: classes.input
}}
fullWidth
select
>
{results.map((result,index) => (
<MenuItem key={index} value={result.id}>
{result.likes}
</MenuItem>
))}
</TextField>
解决方法
这样做。将边距添加到TextField可以将其向下移动,因为通过添加样式,您仅更改了TextField。标签保持在原位。然后将TextField包裹在<div></div>
中,然后将其向上移动相同的值。
import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
const useStyles = makeStyles((theme) => ({
input: {
height: "35px",marginTop: '8px',}
}));
export default function Test() {
const classes = useStyles();
const results = [
{
id: 1,name: "John Jomes",likes: "Food"
},{
id: 2,{
id: 3,likes: "Food"
}
];
return (
<div style={{marginTop: '8px'}}>
<TextField
variant="outlined"
label="Choose"
InputProps={{
className: classes.input
}}
fullWidth
select
>
{results.map((result,index) => (
<MenuItem key={index} value={result.id}>
{result.likes}
</MenuItem>
))}
</TextField>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。