如何在 Material UI 中制作高度響應文本字段？

Question

我需要制作一個具有響應高度的文本字段，因此當瀏覽器最小化/最大化時，高度將始終調整為父網格的大小。

我查找了一個解決方案，我只發現了這個： 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>
 );  
}

Answer 1

只需使用<Stack>組件將所有內容包裝在<Grid>中。

例子

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

應該使您的TextField高度在網格項目中響應。

Answer 2

我只是通過將父網格更改為 div 並將 div 的顯示設置更改為“flex”來解決它。 此外，我將“標簽”class 中的 marginTop 和 marginBottom 設置設置得更高一點。

只要父 div 將 flex 方向設置為“列”。