Fix unwanted width for vertical orientation

mui · Jan 3, 2023 · 68810f6 · 68810f6
1 parent 35a3b85
commit 68810f6
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js
@@ -95,33 +95,35 @@ const DividerRoot = styled('div', {
       height: 'auto',
     }),
   }),
-  ({ theme, ownerState }) => ({
+  ({ ownerState }) => ({
     ...(ownerState.children && {
       display: 'flex',
       whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
       '&::before, &::after': {
         position: 'relative',
-        width: '100%',
-        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
-        top: '50%',
         content: '""',
         alignSelf: 'center',
       },
     }),
   }),
+  ({ theme, ownerState }) => ({
+    ...(ownerState.children &&
+      ownerState.orientation !== 'vertical' && {
+        '&::before, &::after': {
+          width: '100%',
+          borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
+        },
+      }),
+  }),
   ({ theme, ownerState }) => ({
     ...(ownerState.children &&
       ownerState.orientation === 'vertical' && {
         flexDirection: 'column',
         '&::before, &::after': {
           height: '100%',
-          top: '0%',
-          left: '50%',
-          borderTop: 0,
           borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
-          transform: 'translateX(0%)',
         },
       }),
   }),