MUI 从入门到精通

Published by powerfulyang on May 6, 2023

MUI Select 设置弹出层高度，

设置 Select 弹出层高度

在 Material-UI (mui) 中，如果您想要设置 Select 组件的弹出层（Menu）的高度，可以通过设置 MenuProps 属性来完成。具体来说，您可以设置 PaperProps 的 style 属性来改变高度。

下面是一个例子：

javascript
1import React from 'react';
2import MenuItem from '@mui/material/MenuItem';
3import FormControl from '@mui/material/FormControl';
4import Select from '@mui/material/Select';
5
6const CustomSelect = () => {
7  const [value, setValue] = React.useState('');
8
9  const handleChange = (event) => {
10    setValue(event.target.value);
11  };
12
13  return (
14    <FormControl fullWidth>
15      <Select
16        value={value}
17        onChange={handleChange}
18        MenuProps={{
19          PaperProps: {
20            style: {
21              maxHeight: '200px', // 设置弹出层的最大高度
22            },
23          },
24        }}
25      >
26        <MenuItem value={10}>Ten</MenuItem>
27        <MenuItem value={20}>Twenty</MenuItem>
28        <MenuItem value={30}>Thirty</MenuItem>
29        {/* 更多选项 */}
30      </Select>
31    </FormControl>
32  );
33};
34
35export default CustomSelect;

在这个例子中，我们设置了弹出层的最大高度为 200px。您可以根据需要调整高度值。

给 Select 添加搜索功能

为了在 Material-UI 的 Select 组件中添加搜索功能，您可以使用 Autocomplete 组件。Autocomplete 组件提供了一个带有搜索功能的下拉列表，可以方便地与 Select 组件一起使用。

以下是一个使用 Material-UI 的 Autocomplete 组件实现搜索功能的示例：

javascript
1import React from 'react';
2import Autocomplete from '@mui/material/Autocomplete';
3import TextField from '@mui/material/TextField';
4
5const options = [
6  { label: 'Option 1' },
7  { label: 'Option 2' },
8  { label: 'Option 3' },
9  // 更多选项
10];
11
12const SearchSelect = () => {
13  const [value, setValue] = React.useState(null);
14
15  const handleChange = (event, newValue) => {
16    setValue(newValue);
17  };
18
19  return (
20    <Autocomplete
21      value={value}
22      onChange={handleChange}
23      options={options}
24      getOptionLabel={(option) => option.label}
25      fullWidth
26      renderInput={(params) => <TextField {...params} label="Search Select" />}
27    />
28  );
29};
30
31export default SearchSelect;

在这个示例中，我们使用了 Autocomplete 组件，并通过 options 数组提供了一组选项。我们设置了 getOptionLabel 属性来指定如何显示选项的标签，并使用 renderInput 属性提供了一个 TextField 组件作为输入框。

您可以根据需要自定义这个示例以满足您的需求。