TreeItem API
Importação
import TreeItem from '@mui/lab/TreeItem';
// ou
import { TreeItem } from '@mui/lab';
Nome do componente
The nameMuiTreeItem
can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente nativo também estão disponíveis.
Nome | Tipo | Padrão | Descrição |
---|---|---|---|
nodeId* | string | The id of the node. | |
children | node | O conteúdo do componente. | |
classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
collapseIcon | node | The icon used to collapse the node. | |
ContentComponent | element type | TreeItemContent | The component used for the content node. ⚠️ Needs to be able to hold a ref. |
ContentProps | object | Props applied to ContentComponent | |
disabled | bool | false | If true , the node is disabled. |
endIcon | node | The icon displayed next to a end node. | |
expandIcon | node | The icon used to expand the node. | |
icon | node | The icon to display next to the tree node's label. | |
label | node | The tree node label. | |
onFocus | unsupportedProp | This prop isn't supported. Use the onNodeFocus callback on the tree if you need to monitor a node's focus. | |
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. | |
TransitionComponent | elementType | Collapse | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
TransitionProps | object | Props applied to the transition element. By default, the element is based on this Transition component. |
O
ref
é encaminhado para o elemento raiz.CSS
Nome da regra | Classe global | Descrição |
---|---|---|
root | .MuiTreeItem-root | Estilos aplicados ao elemento raiz. |
group | .MuiTreeItem-group | Estilos aplicados a the transition component. |
content | .MuiTreeItem-content | Estilos aplicados a the content element. |
expanded | .Mui-expanded | Pseudo-class applied to the content element when expanded. |
selected | .Mui-selected | Pseudo-class applied to the content element when selected. |
focused | .Mui-focused | Pseudo-class applied to the content element when focused. |
disabled | .Mui-disabled | Pseudo-class applied to the element when disabled. |
iconContainer | .MuiTreeItem-iconContainer | Estilos aplicados a the tree node icon. |
label | .MuiTreeItem-label | Estilos aplicados a the label element. |
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
styleOverrides
property in a custom theme.