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';

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

Props of the nativo component are also available.

Nome	Tipo	Padrão	Descrição
absolute	bool	false	Absolutely position the element.
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.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
flexItem	bool	false	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.)
light	bool	false	If `true`, the divider will have a lighter color.
orientation	'horizontal' \| 'vertical'	'horizontal'	The divider orientation.
sx	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.

Nome da regra	Classe global	Descrição
root	.MuiDivider-root	Estilos aplicados ao elemento raiz.
absolute	.MuiDivider-absolute	Estilos aplicados para o elemento raiz se `absolute={true}`.
inset	.MuiDivider-inset	Estilos aplicados para o elemento raiz se `variant="inset"`.
fullWidth	.MuiDivider-fullWidth	Estilos aplicados para o elemento raiz se `variant="fullWidth"`.
light	.MuiDivider-light	Estilos aplicados para o elemento raiz se `light={true}`.
middle	.MuiDivider-middle	Estilos aplicados para o elemento raiz se `variant="middle"`.
vertical	.MuiDivider-vertical	Estilos aplicados para o elemento raiz se `orientation="vertical"`.
flexItem	.MuiDivider-flexItem	Estilos aplicados para o elemento raiz se `flexItem={true}`.
withChildren	.MuiDivider-withChildren	Estilos aplicados para o elemento raiz se divider have text.
withChildrenVertical	.MuiDivider-withChildrenVertical	Estilos aplicados para o elemento raiz se divider have text and `orientation="vertical"`.
textAlignRight	.MuiDivider-textAlignRight	Estilos aplicados para o elemento raiz se `textAlign="right" orientation="horizontal"`.
textAlignLeft	.MuiDivider-textAlignLeft	Estilos aplicados para o elemento raiz se `textAlign="left" orientation="horizontal"`.
wrapper	.MuiDivider-wrapper	Estilos aplicados para the span children element se `orientation="horizontal"`.
wrapperVertical	.MuiDivider-wrapperVertical	Estilos aplicados para the span children element se `orientation="vertical"`.

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.