如何更改 Material UI 自动完成弹出窗口的宽度

当使用Select https://material-ui.com/api/select/在 Material-UI 中，有一个名为“autoWidth”的道具，它设置弹出窗口的宽度以匹配菜单内项目的宽度。

是否有类似的选项自动完成 https://material-ui.com/components/autocomplete/成分？

我想要实现的是，TextField 的宽度独立于菜单的宽度，并且菜单的宽度由菜单项决定，而不是由硬编码的“宽度”决定。

到目前为止，我设法找到的是使用类向“纸张”组件提供宽度的选项（请参见下面的代码），但它独立于实际项目的宽度，并且纸张的位置不会调整为留在内部窗户。

const styles = (theme) => ({
  paper: {
    width: "450px"
  }
});

function ComboBox(props) {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      classes={{
        paper: props.classes.paper
      }}
      getOptionLabel={(option) => option.title}
      style={{
        width: 300,
        paddingLeft: "100px"
      }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

我想要实现的行为与但使用自动完成组件。请注意，弹出菜单的宽度取自菜单项，而选择组件的宽度是硬编码的。

要拥有基于菜单本身内部元素的动态菜单，您需要自定义自动完成的PopperComponent财产是这样的：

1. 定义一个自定义Popper:

   const PopperMy = function (props) {
      return <Popper {...props} style={styles.popper} placement="bottom-start" />;
   };
   

2. In Popper样式，将宽度设置为“fit-content”：

   const styles = (theme) => ({
      popper: {
         width: "fit-content"
      }
   });
   

3. 传递组件PopperMy自动完成：

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

Here https://codesandbox.io/s/material-demo-forked-b927n?file=/demo.js你的codesandbox修改了吗？