如何在Material-UI中使TextField和Button等高？

在Material-UI中使TextField和Button等高可以通过自定义样式来实现。以下是一种常见的方法：

使用CSS的flexbox布局：在父容器中设置display为flex，并且设置alignItems为center，这样子元素就会垂直居中对齐。

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>
  );
}

使用CSS的grid布局：在父容器中设置display为grid，并且设置gridTemplateColumns为auto auto，这样子元素就会水平排列。

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组件，适用于各种表单和交互场景。

腾讯云相关产品和产品介绍链接地址：