时间戳

首页 > 解决方案 > 为什么我无法使用内联样式更改以下自动完成框的高度？如何将其高度设置为按钮高度？

reactjs - 为什么我无法使用内联样式更改以下自动完成框的高度？如何将其高度设置为按钮高度？

问题描述

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

标签： reactjsautocompletematerial-uibox-sizing

解决方案

它不是为 重新传递style道具input，最好的方法是让您覆盖styles和TextField将 a 传递class给TextField组件（此处为文档），但如果您真的想使用该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"
      />}
    />

推荐阅读