Divider

Overview

Dividers are graphic lines that can add little design accents to your page and help highlight the most critical areas. Dividers separate content into clear groups. Dividers can be paired with subheaders to help define content groupings.

Please refer to this for more information: https://mui.com/material-ui/react-divider/.

Import

CODE

import { Divider } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin	Size Unit: Px	The component Margin with many selectable Size Units.
General	Flex-item: false Orientation: none Text-align: none Variant: none Visibility: none Opacity: 100%	The component General includes Flex-item, Orientation, Text-align, Variant, Visibility, Opacity, and Border-color.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

 <Divider
          sx={{':hover': {'margin': '15px 25px','visibility': 'hidden',
               'opacity': 0.74, 'bgcolor': '#ff0000ff',},}}
          flexItem={true}
          orientation="horizontal"
          textAlign="center"
          variant="fullWidth">
</Divider>