[Divider] Fix styles on dividers with text (#35072)

Signed-off-by: Max Destors <[email protected]> Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Apr 26, 2023 · 46c1e91 · 46c1e91
1 parent 2284631
commit 46c1e91
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js
@@ -95,33 +95,34 @@ 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: '""',
-        transform: 'translateY(50%)',
+        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%)',
         },
       }),
   }),