reactjs 如何更改材质UI自动完成弹出框的宽度

biswetbf 于 2023-04-05 发布在 React

关注(0)|答案(6)|浏览(152)

当使用Material-UI中的Select时，有一个名为“autoWidth”的 prop ，它设置弹出框的宽度以匹配菜单中项目的宽度。
Autocomplete组件是否有类似的选项？
我试图实现的是TextField的宽度独立于菜单的宽度，菜单的宽度由菜单项决定，而不是硬编码的宽度。
到目前为止，我设法找到的是一个使用类为“paper”组件提供宽度的选项（见下面的代码），但它与实际项的宽度无关，而且纸张的位置没有调整到窗口内部。

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的行为，但是使用了Autocomplete组件。请注意，弹出菜单的宽度是从菜单项中获取的，而Select组件的宽度是硬编码的。

reactjs

来源：https://stackoverflow.com/questions/63579345/how-can-i-change-the-width-of-material-ui-autocomplete-popover

6条答案

按热度按时间

hfwmuf9z1#

要拥有一个基于菜单本身内部元素的动态菜单，您需要以这种方式自定义Autocomplete的PopperComponent属性：
1.定义自定义Popper：

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

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

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

1.将组件PopperMy传递到自动完成：

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

Here是你的codesandbox修改。

赞(0）回复(0）举报 2023-04-05

yks3o0rb2#

你有没有看过自动完成API的'fullWidth'属性？
https://material-ui.com/api/autocomplete/
这里有一个例子，我认为它能满足你的要求
https://codesandbox.io/s/full-width-autocomplete-ph30d?file=/demo.js
fullWidth如果为true，将采用其容器的宽度：

赞(0）回复(0）举报 2023-04-05

eoxn13cs3#

你可以通过这个 prop ：

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

自动完成组件

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

赞(0）回复(0）举报 2023-04-05

iqjalb3h4#

Custome proper

const CustomPopper = (props) => {
return (
  <Popper
    {...props}
    placement="bottom"
    sx={{
      height: "10px",
    }}
    style={{ width: props.anchorEl.clientWidth, height: "5px" }}
  />
);

};

自动编译组件

<Autocomplete
      multiple
      freeSolo
      size="small"
      id="tags-outlined"
      options={allTags}
      getOptionLabel={(option) => option}
      // defaultValue={[]}
      filterSelectedOptions
      value={siteTags}
      onChange={(event, newval) => {
        setTags(newval);
      }}
      PopperComponent={CustomPopper}
      renderInput={(params) => (
        <TextField {...params} placeholder="Enter tags" />
      )}
    />

你可以使用“props.anchorEl.clientWidth”在custome适当和更多

赞(0）回复(0）举报 2023-04-05

iyfamqjs5#

<Autocomplete fullWidth sx={{ width: 600 }} />}
在MUI v5中，你可以使用sx属性。

赞(0）回复(0）举报 2023-04-05

hs1rzwqc6#

根据素材官方文档可以传递style prop ：

<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

赞(0）回复(0）举报 2023-04-05

我来回答

reactjs 如何更改材质UI自动完成弹出框的宽度

6条答案

Custome proper

自动编译组件

相关问题

热门标签

最新问答