diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-divider/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-divider/page.tsx
new file mode 100644
index 00000000000000..dc5bb0fa9c9e7d
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-divider/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+import * as React from 'react';
+import DividerText from '../../../../../../docs/data/material/components/dividers/DividerText';
+import DividerVariants from '../../../../../../docs/data/material/components/dividers/DividerVariants';
+import FlexDivider from '../../../../../../docs/data/material/components/dividers/FlexDivider';
+import IntroDivider from '../../../../../../docs/data/material/components/dividers/IntroDivider';
+import ListDividers from '../../../../../../docs/data/material/components/dividers/ListDividers';
+import VerticalDividerMiddle from '../../../../../../docs/data/material/components/dividers/VerticalDividerMiddle';
+import VerticalDividers from '../../../../../../docs/data/material/components/dividers/VerticalDividers';
+
+export default function Dividers() {
+ return (
+
+
+
+
+
+
+
+ Vertical Divider Middle
+
+
+
+
+
+ Vertical Dividers
+
+
+
+
+
+ );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-divider.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-divider.tsx
new file mode 100644
index 00000000000000..df4684b889129d
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-divider.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import DividerText from '../../../../../docs/data/material/components/dividers/DividerText.tsx';
+import DividerVariants from '../../../../../docs/data/material/components/dividers/DividerVariants.tsx';
+import FlexDivider from '../../../../../docs/data/material/components/dividers/FlexDivider.tsx';
+import IntroDivider from '../../../../../docs/data/material/components/dividers/IntroDivider.tsx';
+import ListDividers from '../../../../../docs/data/material/components/dividers/ListDividers.tsx';
+import VerticalDividerMiddle from '../../../../../docs/data/material/components/dividers/VerticalDividerMiddle.tsx';
+import VerticalDividers from '../../../../../docs/data/material/components/dividers/VerticalDividers.tsx';
+
+export default function Dividers() {
+ return (
+
+ Dividers
+
+
+
+
+
+
+ Vertical Divider Middle
+
+
+
+
+
+ Vertical Dividers
+
+
+
+
+
+ );
+}
diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js
index 80aefb09bbe3c6..47debc2df86f05 100644
--- a/packages/mui-material/src/Divider/Divider.js
+++ b/packages/mui-material/src/Divider/Divider.js
@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import { alpha } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
import { getDividerUtilityClass } from './dividerClasses';
+const useThemeProps = createUseThemeProps('MuiDivider');
+
const useUtilityClasses = (ownerState) => {
const { absolute, children, classes, flexItem, light, orientation, textAlign, variant } =
ownerState;
@@ -54,100 +55,140 @@ const DividerRoot = styled('div', {
styles.textAlignLeft,
];
},
-})(
- ({ theme, ownerState }) => ({
- margin: 0, // Reset browser default style.
- flexShrink: 0,
- borderWidth: 0,
- borderStyle: 'solid',
- borderColor: (theme.vars || theme).palette.divider,
- borderBottomWidth: 'thin',
- ...(ownerState.absolute && {
- position: 'absolute',
- bottom: 0,
- left: 0,
- width: '100%',
- }),
- ...(ownerState.light && {
- borderColor: theme.vars
- ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)`
- : alpha(theme.palette.divider, 0.08),
- }),
- ...(ownerState.variant === 'inset' && {
- marginLeft: 72,
- }),
- ...(ownerState.variant === 'middle' &&
- ownerState.orientation === 'horizontal' && {
+})(({ theme }) => ({
+ margin: 0, // Reset browser default style.
+ flexShrink: 0,
+ borderWidth: 0,
+ borderStyle: 'solid',
+ borderColor: (theme.vars || theme).palette.divider,
+ borderBottomWidth: 'thin',
+ variants: [
+ {
+ props: {
+ absolute: true,
+ },
+ style: {
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ width: '100%',
+ },
+ },
+ {
+ props: {
+ light: true,
+ },
+ style: {
+ borderColor: theme.vars
+ ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)`
+ : alpha(theme.palette.divider, 0.08),
+ },
+ },
+ {
+ props: {
+ variant: 'inset',
+ },
+ style: {
+ marginLeft: 72,
+ },
+ },
+ {
+ props: {
+ variant: 'middle',
+ orientation: 'horizontal',
+ },
+ style: {
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
- }),
- ...(ownerState.variant === 'middle' &&
- ownerState.orientation === 'vertical' && {
+ },
+ },
+ {
+ props: {
+ variant: 'middle',
+ orientation: 'vertical',
+ },
+ style: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
- }),
- ...(ownerState.orientation === 'vertical' && {
- height: '100%',
- borderBottomWidth: 0,
- borderRightWidth: 'thin',
- }),
- ...(ownerState.flexItem && {
- alignSelf: 'stretch',
- height: 'auto',
- }),
- }),
- ({ ownerState }) => ({
- ...(ownerState.children && {
- display: 'flex',
- whiteSpace: 'nowrap',
- textAlign: 'center',
- border: 0,
- '&::before, &::after': {
- content: '""',
- alignSelf: 'center',
},
- }),
- }),
- ({ theme, ownerState }) => ({
- ...(ownerState.children &&
- ownerState.orientation !== 'vertical' && {
+ },
+ {
+ props: {
+ orientation: 'vertical',
+ },
+ style: {
+ height: '100%',
+ borderBottomWidth: 0,
+ borderRightWidth: 'thin',
+ },
+ },
+ {
+ props: {
+ flexItem: true,
+ },
+ style: {
+ alignSelf: 'stretch',
+ height: 'auto',
+ },
+ },
+ {
+ props: ({ ownerState }) => !!ownerState.children,
+ style: {
+ display: 'flex',
+ whiteSpace: 'nowrap',
+ textAlign: 'center',
+ border: 0,
+ '&::before, &::after': {
+ content: '""',
+ alignSelf: 'center',
+ },
+ },
+ },
+ {
+ props: ({ ownerState }) => ownerState.children && ownerState.orientation !== 'vertical',
+ style: {
'&::before, &::after': {
width: '100%',
borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
},
- }),
- }),
- ({ theme, ownerState }) => ({
- ...(ownerState.children &&
- ownerState.orientation === 'vertical' && {
+ },
+ },
+ {
+ props: ({ ownerState }) => ownerState.orientation === 'vertical' && ownerState.children,
+ style: {
flexDirection: 'column',
'&::before, &::after': {
height: '100%',
borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
},
- }),
- }),
- ({ ownerState }) => ({
- ...(ownerState.textAlign === 'right' &&
- ownerState.orientation !== 'vertical' && {
+ },
+ },
+ {
+ props: ({ ownerState }) =>
+ ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical',
+ style: {
'&::before': {
width: '90%',
},
'&::after': {
width: '10%',
},
- }),
- ...(ownerState.textAlign === 'left' &&
- ownerState.orientation !== 'vertical' && {
+ },
+ },
+ {
+ props: ({ ownerState }) =>
+ ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical',
+ style: {
'&::before': {
width: '10%',
},
'&::after': {
width: '90%',
},
- }),
- }),
-);
+ },
+ },
+ ],
+}));
const DividerWrapper = styled('span', {
name: 'MuiDivider',
@@ -157,14 +198,21 @@ const DividerWrapper = styled('span', {
return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
},
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
display: 'inline-block',
paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
- ...(ownerState.orientation === 'vertical' && {
- paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
- paddingBottom: `calc(${theme.spacing(1)} * 1.2)`,
- }),
+ variants: [
+ {
+ props: {
+ orientation: 'vertical',
+ },
+ style: {
+ paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
+ paddingBottom: `calc(${theme.spacing(1)} * 1.2)`,
+ },
+ },
+ ],
}));
const Divider = React.forwardRef(function Divider(inProps, ref) {
@@ -219,7 +267,9 @@ const Divider = React.forwardRef(function Divider(inProps, ref) {
* The following flag is used to ensure that this component isn't tabbable i.e.
* does not get highlight/focus inside of MUI List.
*/
-Divider.muiSkipListHighlight = true;
+if (Divider) {
+ Divider.muiSkipListHighlight = true;
+}
Divider.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐