当使用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组件的宽度是硬编码的。
6条答案
按热度按时间hfwmuf9z1#
要拥有一个基于菜单本身内部元素的动态菜单,您需要以这种方式自定义Autocomplete的
PopperComponent
属性:1.定义自定义
Popper
:1.在
Popper
样式中,将宽度设置为“fit-content”:1.将组件
PopperMy
传递到自动完成:Here是你的codesandbox修改。
yks3o0rb2#
你有没有看过自动完成API的'fullWidth'属性?
https://material-ui.com/api/autocomplete/
这里有一个例子,我认为它能满足你的要求
https://codesandbox.io/s/full-width-autocomplete-ph30d?file=/demo.js
fullWidth如果为true,将采用其容器的宽度:
eoxn13cs3#
你可以通过这个 prop :
自动完成组件
iqjalb3h4#
Custome proper
};
自动编译组件
你可以使用“props.anchorEl.clientWidth”在custome适当和更多
iyfamqjs5#
<Autocomplete fullWidth sx={{ width: 600 }} />}
在MUI v5中,你可以使用sx属性。
hs1rzwqc6#
根据素材官方文档可以传递
style
prop :以下是演示:https://codesandbox.io/s/material-demo-forked-qon1b