SelectAPI

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

演示

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

Select

导入

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

通过阅读关于最小化捆绑包大小的指南，了解它们之间的区别。

Props

名称	类型	默认值	描述
action	func \| { current?: { focusVisible: func } }	-	用于命令式操作的 ref。目前仅支持 `focusVisible()` 操作。
autoFocus	bool	false	如果为 `true`，则在首次挂载期间选择元素将获得焦点
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	组件的颜色。它支持对该组件有意义的那些主题颜色。要了解如何添加您自己的颜色，请查看主题组件—扩展颜色。
component	elementType	-	用于根节点的组件。可以是用于 HTML 元素的字符串，也可以是组件。
defaultListboxOpen	bool	false	如果为 `true`，则选择器将初始打开。
defaultValue	any	-	默认选定的值。当组件不受控时使用。
disabled	bool	false	如果为 `true`，则禁用该组件。
endDecorator	node	-	选择器的尾部装饰。
getSerializedValue	func	-	将当前选定的值转换为字符串的函数。用于设置与选择器关联的隐藏输入的值，以便可以将选定的值与表单一起发布。
indicator	node	-	选择器的指示器()。 ________________ [ value ] ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
listboxId	string	-	列表框元素的 `id` 属性。也用于派生选项的 `id` 属性。
listboxOpen	bool	undefined	控制选择器列表框的打开状态。
multiple	bool	-	如果为 `true`，则允许选择多个值。这会影响 `value`、`defaultValue` 和 `onChange` props 的类型。
name	string	-	元素的名称。例如，服务器使用它来识别表单提交中的字段。
onChange	func	-	在选择选项时触发的回调。
onClose	func	-	当焦点离开菜单并且菜单应关闭时触发。
onListboxOpenChange	func	-	当组件请求打开时触发的回调。在受控模式下使用（请参阅 listboxOpen）。
placeholder	node	-	没有选定值时显示的文本。
renderValue	func	-	自定义选定值渲染的功能。
required	bool	false	如果为 `true`，则提交表单时 Select 不能为空。
size	'sm' \| 'md' \| 'lg' \| string	-	组件的大小。要了解如何向组件添加自定义尺寸，请查看主题组件—扩展尺寸。
slots	{ button?: elementType, endDecorator?: elementType, indicator?: elementType, listbox?: elementType, root?: elementType, startDecorator?: elementType }	{}	用于内部每个插槽的组件。有关更多详细信息，请参阅下面的插槽 API。
startDecorator	node	-	选择器的前导装饰。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅`sx` 页面。
value	any	-	选定的值。设置为 `null` 以取消选择所有选项。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'outlined'	要使用的全局变体。要了解如何添加您自己的变体，请查看主题组件—扩展变体。

ref 被转发到根元素。

主题默认 props

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

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称	类名	默认组件	描述
root	.MuiSelect-root	`'div'`	渲染根的组件。
button	.MuiSelect-button	`'button'`	渲染按钮的组件。
startDecorator	.MuiSelect-startDecorator	`'span'`	渲染开始装饰器的组件。
endDecorator	.MuiSelect-endDecorator	`'span'`	渲染结束装饰器的组件。
indicator	.MuiSelect-indicator	`'span'`	渲染指示器的组件。
listbox	.MuiSelect-listbox	`'ul'`	渲染列表框的组件。

CSS 类

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled={true}`，则应用于根插槽的状态类。
.Mui-expanded		如果列表框打开，则应用于根插槽的状态类。
.Mui-focusVisible		如果按钮是键盘焦点，则应用于 SelectBase 根插槽的状态类。
.MuiSelect-colorContext	colorContext	当触发颜色反转时应用于根元素的类名。
.MuiSelect-colorDanger	colorDanger	如果 `color="danger"`，则应用于根插槽的类名。
.MuiSelect-colorNeutral	colorNeutral	如果 `color="neutral"`，则应用于根插槽的类名。
.MuiSelect-colorPrimary	colorPrimary	如果 `color="primary"`，则应用于根插槽的类名。
.MuiSelect-colorSuccess	colorSuccess	如果 `color="success"`，则应用于根插槽的类名。
.MuiSelect-colorWarning	colorWarning	如果 `color="warning"`，则应用于根插槽的类名。
.MuiSelect-multiple	multiple	如果 `multiple=true`，则应用于根插槽的类名
.MuiSelect-popper	popper	应用于 popper 插槽的类名。
.MuiSelect-sizeLg	sizeLg	如果 `size="lg"`，则应用于根插槽的类名。
.MuiSelect-sizeMd	sizeMd	如果 `size="md"`，则应用于根插槽的类名。
.MuiSelect-sizeSm	sizeSm	如果 `size="sm"`，则应用于根插槽的类名。
.MuiSelect-variantOutlined	variantOutlined	如果 `variant="outlined"`，则应用于根插槽的类名。
.MuiSelect-variantPlain	variantPlain	如果 `variant="plain"`，则应用于根插槽的类名。
.MuiSelect-variantSoft	variantSoft	如果 `variant="soft"`，则应用于根插槽的类名。
.MuiSelect-variantSolid	variantSolid	如果 `variant="solid"`，则应用于根插槽的类名。

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

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

源代码

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