OptionAPI

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

演示

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

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

阅读有关最小化 bundle 大小的指南，了解它们之间的区别。

原生组件的 Props 也可用。

名称	类型	默认值	描述
value*	any	-	选项值。
children	node	-	组件的内容。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	组件的颜色。它支持对此组件有意义的主题颜色。要了解如何添加自己的颜色，请查看主题组件 - 扩展颜色。
disabled	bool	false	如果为 `true`，则禁用该组件。
label	element \| string	-	选项内容的文本表示形式。用于键盘文本导航匹配。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅 `sx` 页面。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'plain'	要使用的全局变体。要了解如何添加自己的变体，请查看主题组件 - 扩展变体。

该组件不能持有 ref。

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

插槽名称	类名	默认组件	描述
root	.MuiOption-root	`'li'`	渲染根的组件。

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled={true}`，则应用于根元素的状态类。
.Mui-selected		如果选项被选中，则应用于根元素的状态类。
.MuiOption-colorContext	颜色上下文	如果 `color="context"`，则应用于根元素的类名。
.MuiOption-colorDanger	colorDanger	如果 `color="danger"`，则应用于根元素的类名。
.MuiOption-colorNeutral	colorNeutral	如果 `color="neutral"`，则应用于根元素的类名。
.MuiOption-colorPrimary	colorPrimary	如果 `color="primary"`，则应用于根元素的类名。
.MuiOption-colorSuccess	colorSuccess	如果 `color="success"`，则应用于根元素的类名。
.MuiOption-colorWarning	colorWarning	如果 `color="warning"`，则应用于根元素的类名。
.MuiOption-highlighted	高亮	如果选项被高亮，则应用于根元素的状态类。
.MuiOption-variantOutlined	variantOutlined	如果 `variant="outlined"`，则应用于根元素的状态类。
.MuiOption-variantPlain	variantPlain	如果 `variant="plain"`，则应用于根元素的状态类。
.MuiOption-variantSoft	variantSoft	如果 `variant="soft"`，则应用于根元素的状态类。
.MuiOption-variantSolid	variantSolid	如果 `variant="solid"`，则应用于根元素的状态类。

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

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