NativeSelect API
Documentação da API para o componente React NativeSelect . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import NativeSelect from '@mui/material/NativeSelect';
// ou
import { NativeSelect } from '@mui/material';An alternative to <Select native /> with a much smaller bundle size footprint.
Nome do componente
The nameMuiNativeSelect can be used when providing default props or style overrides in the theme.Propriedades
Props of the Input component are also available.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | node | The option elements to populate the select with. Can be some <option> elements. | |
| classes | object | {} | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. |
| 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) => voidevent: The event source of the callback. You can pull out the new value by accessing event.target.value (string). | |
| sx | 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' | A variante a usar. |
O
ref é encaminhado para o elemento raiz.Herança
Embora não explicitamente documentado acima, as propriedades do componente Input também estão disponíveis em NativeSelect. Você pode tirar vantagem disso para manipular componentes aninhados.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiNativeSelect-root | Estilos aplicados ao elemento raiz. |
| select | .MuiNativeSelect-select | Estilos aplicados a the select component `select` class. |
| filled | .MuiNativeSelect-filled | Estilos aplicados para the select component se variant="filled". |
| outlined | .MuiNativeSelect-outlined | Estilos aplicados para the select component se variant="outlined". |
| standard | .MuiNativeSelect-standard | Estilos aplicados para the select component se variant="standard". |
| disabled | .Mui-disabled | Pseudo-class applied to the select component `disabled` class. |
| icon | .MuiNativeSelect-icon | Estilos aplicados a the icon component. |
| iconOpen | .MuiNativeSelect-iconOpen | Estilos aplicados para the icon component se the popup is open. |
| iconFilled | .MuiNativeSelect-iconFilled | Estilos aplicados para the icon component se variant="filled". |
| iconOutlined | .MuiNativeSelect-iconOutlined | Estilos aplicados para the icon component se variant="outlined". |
| iconStandard | .MuiNativeSelect-iconStandard | Estilos aplicados para the icon component se variant="standard". |
| nativeInput | .MuiNativeSelect-nativeInput | Estilos aplicados a the underlying native input component. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.