为什么我不能更改以下具有内联样式的自动完成框的高度?如何将其高度设置为按钮高度?

Why I cannot change height of the following autocomplete boxes with inline styles? How to set its height as some as button height?

我想在 react.js 中更改自动完成框的高度,但只呈现宽度而不是高度,尽管我同时使用了这两个属性

        <Autocomplete     
                    id="combo-box-demo"
                      options={Options}
                      getOptionLabel={(option) => option.title}
                      style={{ width: 250, marginRight: 25, height: 31}}   
                      renderInput={(params) => <TextField {...params} label="Category" variant="outlined" />}
                     />

        <Button variant="contained" color="primary"  style={{ width: 150, height: 31, marginTop: 15}}> 
                  Search
        </Button>

这不是重新传递 inputstyle 属性,最好的方法是覆盖 TextFieldstyles 并传递 classTextField 组件(here the docs),但如果你真的想使用 styles 属性,你可以将它直接传递给输入。这里有一个例子:

<Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 250, marginRight: 25}}
      renderInput={(params) => <TextField
        {...params}
        InputProps={{
          style: { height: 100}
        }}
        label="Combo box"
        variant="outlined"
      />}
    />