在Material-UI中使TextField和Button等高可以通过自定义样式来实现。以下是一种常见的方法:
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
container: {
display: 'flex',
alignItems: 'center',
},
});
function MyComponent() {
const classes = useStyles();
return (
<div className={classes.container}>
<TextField label="Username" />
<Button variant="contained" color="primary">Submit</Button>
</div>
);
}
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
container: {
display: 'grid',
gridTemplateColumns: 'auto auto',
gap: '8px', // 可选,设置子元素之间的间距
},
});
function MyComponent() {
const classes = useStyles();
return (
<div className={classes.container}>
<TextField label="Username" />
<Button variant="contained" color="primary">Submit</Button>
</div>
);
}
以上两种方法都可以使TextField和Button等高,并且可以根据实际需求进行样式调整。在Material-UI中,TextField和Button都是常用的UI组件,适用于各种表单和交互场景。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云