javascript - 材质 UI 文本字段标签

Question

我正在尝试缩放 Material UI 中的文本字段，以便它响应窗口尺寸的变化。我已经能够缩放实际的文本字段大小，但是当我这样做时，标签不再正确地位于文本字段中，如下所示：

这是我用来创建文本字段的代码

      <Autocomplete
        freeSolo
        options={top100Films.map(option => option.title)}
        renderInput={params => (
            <TextField {...params}  label="Search for places, events or lists" variant="outlined"
                InputLabelProps={{
                    style: {
                        overflow: 'hidden',
                        fontSize: '1vw', 
                    }, 
                }}
                InputProps={{ ...params.InputProps,
                    endAdornment: 
                    <InputAdornment position="end"><SearchIcon style={{fontSize:'1.5vw'}}/></InputAdornment>,
                    style: {
                      padding: '0.5vw',
                    },
                    
                }}
                inputProps={{ ...params.inputProps,
                  style: {
                    padding: '0.5vw',
                    height: '1vw',
                  }
                }}
            />
        )} {...props} />

有没有人在使文本字段动态化时遇到问题并且知道如何解决这个问题？