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

Question

I want to change Height of Autocomplete box in react.js but only width is rendered not height although I'm using both properties

        <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>

score 3 · Accepted Answer · answered Jun 25 '20 at 22:45

It's not repassing the style prop for the input, the best way is for you to override the styles of the TextField and of pass a class to the TextField component (here the docs), but if you really want to use the styles prop, you can pass it direct to the input. Here an example:

<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?

1 Answers1