Divider API
API documentation for the React Divider component. Learn about the available props and the CSS API.
Import
import Divider from '@mui/material/Divider';
// or
import { Divider } from '@mui/material';Component name
The nameMuiDivider can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| absolute | bool | false | Absolutely position the element. |
| children | node | The content of the component. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| 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 component 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' | The variant to use. |
The
ref is forwarded to the root element.CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiDivider-root | Styles applied to the root element. |
| absolute | .MuiDivider-absolute | Styles applied to the root element if absolute={true}. |
| inset | .MuiDivider-inset | Styles applied to the root element if variant="inset". |
| fullWidth | .MuiDivider-fullWidth | Styles applied to the root element if variant="fullWidth". |
| light | .MuiDivider-light | Styles applied to the root element if light={true}. |
| middle | .MuiDivider-middle | Styles applied to the root element if variant="middle". |
| vertical | .MuiDivider-vertical | Styles applied to the root element if orientation="vertical". |
| flexItem | .MuiDivider-flexItem | Styles applied to the root element if flexItem={true}. |
| withChildren | .MuiDivider-withChildren | Styles applied to the root element if divider have text. |
| withChildrenVertical | .MuiDivider-withChildrenVertical | Styles applied to the root element if divider have text and orientation="vertical". |
| textAlignRight | .MuiDivider-textAlignRight | Styles applied to the root element if textAlign="right" orientation="horizontal". |
| textAlignLeft | .MuiDivider-textAlignLeft | Styles applied to the root element if textAlign="left" orientation="horizontal". |
| wrapper | .MuiDivider-wrapper | Styles applied to the span children element if orientation="horizontal". |
| wrapperVertical | .MuiDivider-wrapperVertical | Styles applied to the span children element if orientation="vertical". |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.