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

Question

当使用Select from Material-UI 时，有一个名为“autoWidth”的道具，它设置弹出框的宽度以匹配菜单内项目的宽度。

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" />
      )}
    />
  );
}

链接到代码沙盒

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

Answer 1

你可以传递这个道具：

componentsProps={{ popper: { style: { width: 'fit-content' } } }}

自动完成组件

<Autocomplete
  ....
  componentsProps={{ popper: { style: { width: 'fit-content' } } }}
/>

Answer 2

要基于菜单本身内部的元素创建动态菜单，您必须以PopperComponent这种方式自定义 Autocomplete 的属性：

1. 定义自定义Popper：

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

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

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

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

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

这是您修改的代码和框。