选择器API

React Select 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

示例

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

选择器

导入

import Select from '@mui/material/Select';
// or
import { Select } from '@mui/material';

阅读本指南，了解有关最小化 bundle 大小的差异。

Props

OutlinedInput 组件的 Props 也可用。

名称	类型	默认值	描述
autoWidth	布尔值	false	如果为 `true`，弹出框的宽度将根据菜单内的项目自动设置，否则它将至少是选择输入框的宽度。
children	节点	-	用于填充选择器的选项元素。当 `native` 为 false 时，可以是 `MenuItem`；当 `native` 为 true 时，可以是 `option`。 ⚠️当 `native` 为 false 时，`MenuItem` 元素必须是直接后代。
classes	对象	{}	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
defaultOpen	布尔值	false	如果为 `true`，则组件最初处于打开状态。当组件打开状态不受控制时使用（即未定义 `open` prop）。仅当 `native` prop 为 `false`（默认值）时才能使用它。
defaultValue	任意类型	-	默认值。当组件不受控制时使用。
displayEmpty	布尔值	false	如果为 `true`，即使未选择任何项目，也会显示一个值。为了显示有意义的值，可以将一个函数传递给 `renderValue` prop，该函数返回未选择任何项目时要显示的值。 ⚠️ 使用此 prop 时，请确保标签不与显示的空值重叠。标签应隐藏或强制为收缩状态。
IconComponent	元素类型	ArrowDropDownIcon	显示箭头的图标。
id	字符串	-	当 `native` 为 true 时，包装器元素或 `select` 元素的 `id`。
input	元素	-	一个 `Input` 元素；不必是 material-ui 特定的 `Input`。
inputProps	对象	-	属性应用于 `input` 元素的属性。当 `native` 为 `true` 时，属性应用于 `select` 元素。
label	节点	-	请参阅 OutlinedInput#label
labelId	字符串	-	充当附加标签的元素的 ID。Select 将由附加标签和选定的值标记。
MenuProps	对象	-	应用于 `Menu` 元素的 Props。
multiple	布尔值	false	如果为 `true`，则 `value` 必须是一个数组，并且菜单将支持多选。
native	布尔值	false	如果为 `true`，则组件使用原生 `select` 元素。
onChange	函数	-	当选择菜单项时触发的回调。签名:`function(event: SelectChangeEvent<value>, child?: object) => void` `event` 回调的事件源。您可以通过访问 `event.target.value` (any) 来提取新值。警告：这是一个通用事件，而不是更改事件，除非更改事件是由浏览器自动填充引起的。 `child` 当 `native` 为 `false`（默认值）时选择的 react 元素。
onClose	函数	-	当组件请求关闭时触发的回调。在受控模式（请参阅 `open` prop）或非受控模式（检测 Select 何时折叠）下使用它。签名:`function(event: object) => void` `event` 回调的事件源。
onOpen	函数	-	当组件请求打开时触发的回调。在受控模式（请参阅 `open` prop）或非受控模式（检测 Select 何时展开）下使用它。签名:`function(event: object) => void` `event` 回调的事件源。
open	布尔值	-	如果为 `true`，则显示组件。仅当 `native` prop 为 `false`（默认值）时才能使用它。
renderValue	函数	-	渲染选定的值。仅当 `native` prop 为 `false`（默认值）时才能使用它。签名:`function(value: any) => ReactNode` `value` 提供给组件的值。
SelectDisplayProps	对象	-	应用于可点击 div 元素的 Props。
sx	数组<函数 \| 对象 \| 布尔值> \| 函数 \| 对象	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅 `sx` 页面。
value	'' \| 任意类型	-	输入值。提供空字符串将不选择任何选项。如果您不想选择任何可用选项，请设置为空字符串 `''`。如果值是一个对象，它必须与选项具有引用相等性才能被选中。如果值不是对象，则字符串表示形式必须与选项的字符串表示形式匹配才能被选中。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的变体。

ref 被转发到根元素。

继承

虽然上面没有明确记录，但 OutlinedInput 组件的 props 在 Select 中也可用。您可以利用这一点来定位嵌套组件。

主题默认 props

您可以使用 MuiSelect 通过主题更改此组件的默认 props。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。

类名	规则名	描述
.Mui-disabled		应用于 select 组件 `disabled` 类的状态类。
.Mui-error		如果 `error={true}`，则应用于根元素的状态类。
.Mui-focused		如果 select 组件被聚焦，则应用于它的样式。
.MuiSelect-filled	filled	如果 `variant="filled"`，则应用于 select 组件的样式。
.MuiSelect-icon	icon	应用于 icon 组件的样式。
.MuiSelect-iconFilled	iconFilled	如果 `variant="filled"`，则应用于 icon 组件的样式。已弃用－请结合使用 .MuiSelect-icon 和 .MuiSelect-filled 类。有关更多详细信息，请参阅“从已弃用的 API 迁移”。
.MuiSelect-iconOpen	iconOpen	如果弹出窗口打开，则应用于 icon 组件的样式。
.MuiSelect-iconOutlined	iconOutlined	如果 `variant="outlined"`，则应用于 icon 组件的样式。已弃用－请结合使用 .MuiSelect-icon 和 .MuiSelect-outlined 类。有关更多详细信息，请参阅“从已弃用的 API 迁移”。
.MuiSelect-iconStandard	iconStandard	如果 `variant="standard"`，则应用于 icon 组件的样式。已弃用－请结合使用 .MuiSelect-icon 和 .MuiSelect-standard 类。有关更多详细信息，请参阅“从已弃用的 API 迁移”。
.MuiSelect-multiple	multiple	如果 `multiple={true}`，则应用于 select 组件的样式。
.MuiSelect-nativeInput	nativeInput	应用于底层原生输入组件的样式。
.MuiSelect-outlined	outlined	如果 `variant="outlined"`，则应用于 select 组件的样式。
.MuiSelect-root	root	应用于根元素的样式。
.MuiSelect-select	select	应用于 select 组件 `select` 类的样式。
.MuiSelect-standard	standard	如果 `variant="standard"`，则应用于 select 组件的样式。

您可以使用以下自定义选项之一覆盖组件的样式

使用全局类名。
在自定义主题中，使用规则名作为组件的styleOverrides 属性的一部分。

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。