跳到主要内容跳到主要内容

AutocompleteListboxAPI

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

演示

导入

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

通过阅读关于最小化 bundle size 的指南,了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称类型默认值描述
color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string
'neutral'

组件的颜色。它支持那些对此组件有意义的主题颜色。

要了解如何添加您自己的颜色,请查看主题组件—扩展颜色

componentelementType-

用于根节点的组件。可以使用字符串来使用 HTML 元素或组件。

size'sm'
| 'md'
| 'lg'
'md'

组件的尺寸(影响其他嵌套的 list* 组件)。

要了解如何向组件添加自定义尺寸,请查看主题组件—扩展尺寸

slotProps{ root?: func
| object }
{}

用于每个内部插槽的 props。

slots{ root?: elementType }{}

用于每个内部插槽的组件。

有关更多详细信息,请参见下面的插槽 API

sxArray<func
| object
| bool>
| func
| object
-

系统 prop,允许定义系统覆盖以及其他 CSS 样式。

有关更多详细信息,请参见 `sx` 页面

variant'contained'
| 'light'
| 'outlined'
| 'text'
| string
'outlined'

要使用的全局变体

要了解如何添加您自己的变体,请查看主题组件—扩展变体

ref 被转发到根元素。

主题默认 props

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

插槽

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

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

CSS 类

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

类名规则名称描述
.MuiAutocompleteListbox-colorContextcolorContext当颜色反转被触发时,应用于根元素的类名。
.MuiAutocompleteListbox-colorDangercolorDanger如果 color="danger",则应用于根元素的类名。
.MuiAutocompleteListbox-colorNeutralcolorNeutral如果 color="neutral",则应用于根元素的类名。
.MuiAutocompleteListbox-colorPrimarycolorPrimary如果 color="primary",则应用于根元素的类名。
.MuiAutocompleteListbox-colorSuccesscolorSuccess如果 color="success",则应用于根元素的类名。
.MuiAutocompleteListbox-colorWarningcolorWarning如果 color="warning",则应用于根元素的类名。
.MuiAutocompleteListbox-sizeLgsizeLg如果 size="lg",则应用于根元素的类名。
.MuiAutocompleteListbox-sizeMdsizeMd如果 size="md",则应用于根元素的类名。
.MuiAutocompleteListbox-sizeSmsizeSm如果 size="sm",则应用于根元素的类名。
.MuiAutocompleteListbox-variantOutlinedvariantOutlined如果 variant="outlined",则应用于根元素的类名。
.MuiAutocompleteListbox-variantPlainvariantPlain如果 variant="plain",则应用于根元素的类名。
.MuiAutocompleteListbox-variantSoftvariantSoft如果 variant="soft",则应用于根元素的类名。
.MuiAutocompleteListbox-variantSolidvariantSolid如果 variant="solid",则应用于根元素的类名。

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

源代码

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