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 组件的属性也是可用的。

名称	类型	默认值	描述
children	node		The option elements to populate the select with. Can be some `<option>` elements.
classes	object	{}	Override or extend the styles applied to the component. See CSS API below for more details.
IconComponent	elementType	ArrowDropDownIcon	The icon that displays the arrow.
input	element	<Input />	An `Input` element; does not have to be a material-ui specific `Input`.
inputProps	object		Attributes applied to the `select` element.
onChange	func		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).
sx	Array<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.
value	any		The `input` value. The DOM API casts this to a string.
variant	'filled' \| 'outlined' \| 'standard'		The variant to use.

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

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

规则名称	全局类名	描述
root	.MuiNativeSelect-root	Styles applied to the root element.
select	.MuiNativeSelect-select	Styles applied to the select component `select` class.
multiple	.MuiNativeSelect-multiple	Styles applied to the select component if `multiple={true}`.
filled	.MuiNativeSelect-filled	Styles applied to the select component if `variant="filled"`.
outlined	.MuiNativeSelect-outlined	Styles applied to the select component if `variant="outlined"`.
standard	.MuiNativeSelect-standard	Styles applied to the select component if `variant="standard"`.
disabled	.Mui-disabled	Pseudo-class applied to the select component `disabled` class.
icon	.MuiNativeSelect-icon	Styles applied to the icon component.
iconOpen	.MuiNativeSelect-iconOpen	Styles applied to the icon component if the popup is open.
iconFilled	.MuiNativeSelect-iconFilled	Styles applied to the icon component if `variant="filled"`.
iconOutlined	.MuiNativeSelect-iconOutlined	Styles applied to the icon component if `variant="outlined"`.
iconStandard	.MuiNativeSelect-iconStandard	Styles applied to the icon component if `variant="standard"`.
nativeInput	.MuiNativeSelect-nativeInput	Styles applied to the underlying native input component.

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