Pular para o conteúdo
Ajude a traduzir esta página

Divider API

Documentação da API para o componente React Divider . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Divider from '@mui/material/Divider';
// ou
import { Divider } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiDivider can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
absoluteboolfalse
Absolutely position the element.
childrennode
O conteúdo do componente.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
flexItemboolfalse
If true, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of 0px if it is the child of a flex container.)
lightboolfalse
If true, the divider will have a lighter color.
orientation'horizontal'
| 'vertical'		'horizontal'
The divider orientation.
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.
textAlign'center'
| 'left'
| 'right'		'center'
The text alignment.
variant'fullWidth'
| 'inset'
| 'middle'
| string		'fullWidth'
A variante a usar.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiDivider-rootEstilos aplicados ao elemento raiz.
absolute.MuiDivider-absoluteEstilos aplicados para o elemento raiz se absolute={true}.
inset.MuiDivider-insetEstilos aplicados para o elemento raiz se variant="inset".
fullWidth.MuiDivider-fullWidthEstilos aplicados para o elemento raiz se variant="fullWidth".
light.MuiDivider-lightEstilos aplicados para o elemento raiz se light={true}.
middle.MuiDivider-middleEstilos aplicados para o elemento raiz se variant="middle".
vertical.MuiDivider-verticalEstilos aplicados para o elemento raiz se orientation="vertical".
flexItem.MuiDivider-flexItemEstilos aplicados para o elemento raiz se flexItem={true}.
withChildren.MuiDivider-withChildrenEstilos aplicados para o elemento raiz se divider have text.
withChildrenVertical.MuiDivider-withChildrenVerticalEstilos aplicados para o elemento raiz se divider have text and orientation="vertical".
textAlignRight.MuiDivider-textAlignRightEstilos aplicados para o elemento raiz se textAlign="right" orientation="horizontal".
textAlignLeft.MuiDivider-textAlignLeftEstilos aplicados para o elemento raiz se textAlign="left" orientation="horizontal".
wrapper.MuiDivider-wrapperEstilos aplicados para the span children element se orientation="horizontal".
wrapperVertical.MuiDivider-wrapperVerticalEstilos aplicados para the span children element se orientation="vertical".

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações