为什么我不能更改以下具有内联样式的自动完成框的高度?如何将其高度设置为按钮高度?
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>
这不是重新传递 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"
/>}
/>
我想在 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>
这不是重新传递 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"
/>}
/>