如何在 Material UI 中制作高度响应文本字段？答案

【问题标题】：how to make a height responsive textfield in Material UI?如何在 Material UI 中制作高度响应文本字段？
【发布时间】：2022-01-23 21:42:12
【问题描述】：

我需要创建一个具有响应高度的文本字段，这样当浏览器最小化/最大化时，高度将始终自行调整为父网格的大小。

我查找了一个解决方案，但我发现了这个： Responsive MaterialUI TextField?

它只是让我知道了如何解决与宽度相同的问题。它不适用于高度。

这是我的代码：

const useStyles = makeStyles({
infogrid: {
    width: '30%',
    height: '39%',
    display: 'inline-block',
    position: 'absolute',
    right: '8%',
    top: '10%',
    backgroundColor: '#00ffff',
    borderRadius: '5vh',
    alignItems: 'center',
    justifyContent: 'center',
    justifyItems: 'center',
    flexDirection: 'column',
    overflow: 'auto'
  },

label: {
    margin: '25%',
    marginTop: '0.3%',
    marginBottom: '0.3%',
    display: 'block',
    height: '9%',
    width: '50%',
    
  }
})

export default function App() {

  const  classes = useStyles()
  
  <Grid className={classes.infogrid}>
     
      <TextField fullWidth className={classes.label} id="ovalID" label="1" variant="outlined" />
      <TextField fullWidth className={classes.label} id="latitude" label="2" variant="outlined" />
      <TextField fullWidth className={classes.label} id="longitude" label="3" variant="outlined" />
      <TextField fullWidth className={classes.label} id="ovalRadius1" label="4" variant="outlined" />
      <TextField fullWidth className={classes.label} id="ovalRadius2" label="5" variant="outlined" />
      <TextField fullWidth className={classes.label} id="angel" label="6" variant="outlined" />

     
      </Grid>
 );  
}

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

只需使用<Stack> 组件将所有内容包装在您的<Grid> 中即可。

示例

<Grid>
  <Stack>
    <TextField />
    <TextField />
    <TextField />
    <TextField />
  </Stack>
</Grid>

应该让您的TextField 高度响应网格项目。

【讨论】：

好主意，但我尝试导入此组件（以两种方式）并收到“未找到模块”错误。任何线索为什么？
你应该import {Stack} from '@mui/material'
是的，我试图这样做。不起作用。同样的错误
你能说明你收到了什么错误，特别是它说找不到哪个模块吗？

【解决方案2】：

我只是通过将父网格更改为 div 并将 div 的显示设置更改为“flex”来解决它。另外，我将 'labels' 类中的 marginTop 和 marginBottom 设置得高一点。

只要父 div 的 flex 方向设置为 'column'。

【讨论】：