跳转到内容
编辑此页面

NativeSelect API

想要学习更多组件属性和 CSS API，可以查阅 React NativeSelect 组件的 API 文档。

导入

import NativeSelect from '@mui/material/NativeSelect';
// 或
import { NativeSelect } from '@mui/material';
你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

An alternative to <Select native /> with a much smaller bundle size footprint.

组件名称

在主题中，名称“MuiNativeSelect”可用于提供默认属性（props），或者样式覆盖

属性

Input 组件的属性也是可用的。

名称类型默认值描述
childrennode
The option elements to populate the select with. Can be some <option> elements.
classesobject{}
Override or extend the styles applied to the component. See CSS API below for more details.
IconComponentelementTypeArrowDropDownIcon
The icon that displays the arrow.
inputelement<Input />
An Input element; does not have to be a material-ui specific Input.
inputPropsobject
Attributes applied to the select element.
onChangefunc
Callback fired when a menu item is selected.

Signature:
function(event: object) => void
event: The event source of the callback. You can pull out the new value by accessing event.target.value (string).
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
valueany
The input value. The DOM API casts this to a string.
variant'filled'
| 'outlined'
| 'standard'
The variant to use.

ref 则会被传递到根元素中。

继承

尽管上文没有明文记录， Input 组件 的属性(props) 在组件NativeSelect上同样是可用的。 你可以利用这一点来 指向嵌套组件

CSS

规则名称全局类名描述
root.MuiNativeSelect-rootStyles applied to the root element.
select.MuiNativeSelect-selectStyles applied to the select component `select` class.
multiple.MuiNativeSelect-multipleStyles applied to the select component if multiple={true}.
filled.MuiNativeSelect-filledStyles applied to the select component if variant="filled".
outlined.MuiNativeSelect-outlinedStyles applied to the select component if variant="outlined".
standard.MuiNativeSelect-standardStyles applied to the select component if variant="standard".
disabled.Mui-disabledPseudo-class applied to the select component `disabled` class.
icon.MuiNativeSelect-iconStyles applied to the icon component.
iconOpen.MuiNativeSelect-iconOpenStyles applied to the icon component if the popup is open.
iconFilled.MuiNativeSelect-iconFilledStyles applied to the icon component if variant="filled".
iconOutlined.MuiNativeSelect-iconOutlinedStyles applied to the icon component if variant="outlined".
iconStandard.MuiNativeSelect-iconStandardStyles applied to the icon component if variant="standard".
nativeInput.MuiNativeSelect-nativeInputStyles applied to the underlying native input component.

您可以使用组件自定义选项对组件进行个性化：

演示项目