score:21

Accepted answer

To have a dynamic menu based on elements inside the menu itself you have to customize the Autocomplete's PopperComponent property in this way:

  1. Define a custom Popper:

    const PopperMy = function (props) {
       return <Popper {...props} style={styles.popper} placement="bottom-start" />;
    };
    
  2. In Popper style, set the width to "fit-content":

    const styles = (theme) => ({
       popper: {
          width: "fit-content"
       }
    });
    
  3. Pass the component PopperMy to Autocomplete:

    <Autocomplete
       PopperComponent={PopperMy}
       ...  
    />
    

Here is your codesandbox modified.

score:-3

According to material official documentaion you can pass style props:

<Autocomplete
      id="combo-box-demo"
      options={top100Films}
      style={{ width: "450px" }}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />

Here is the demo:https://codesandbox.io/s/material-demo-forked-qon1b

score:0

<Autocomplete fullWidth sx={{ width: 600 }} />}

in MUI v5 you can use the sx prop.

score:1

Did you look into 'fullWidth' attribute of autocomplete api?

https://material-ui.com/api/autocomplete/

Here is an example which I think will fulfill your requirement

https://codesandbox.io/s/full-width-autocomplete-ph30d?file=/demo.js

fullWidth if true, will take the width of its container:


Related Query

More Query from same tag