Skip to main content
Skip table of contents

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>

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.