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

Question

我想在 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>

Answer 1

这不是重新传递 input 的 style 属性，最好的方法是覆盖 TextField 的 styles 并传递 class 到 TextField 组件（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"
      />}
    />

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

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

autocomplete

reactjs

material-ui

box-sizing