材质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} />

有人在使文本字段动态化方面遇到问题，并且知道如何解决此问题吗？