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

Question

使用 Material-UI 中的 Select 时，有一个名为“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" />
      )}
    />
  );
}

link to codesandbox

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

Answer 1

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

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}
      ...  
   />
   

Here 是您的密码箱已修改。

Answer 2

您是否查看过自动完成 api 的“fullWidth”属性？

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

这是一个我认为可以满足您要求的示例

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

fullWidth 如果为真，将取其容器的宽度：

Answer 3

根据material官方文档可以通过styleprops：

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

这里是演示：https://codesandbox.io/s/material-demo-forked-qon1b