[material-ui][Divider] Enable borderStyle enhancement in divider with children (@anuujj)

packages/mui-material/src/Divider/Divider.js

@@ -106,14 +106,48 @@ const DividerRoot = styled('div', {
         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,
+        borderTopStyle: 'solid',
+        borderLeftStyle: 'solid',
+        '&::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}`,
+          borderTopStyle: 'inherit',
         },
       }),
   }),
@@ -124,6 +158,7 @@ const DividerRoot = styled('div', {
         '&::before, &::after': {
           height: '100%',
           borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
+          borderLeftStyle: 'inherit',
         },
       }),
   }),

packages/mui-material/src/Divider/Divider.test.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
+import { styled } from '@mui/material/styles';
 import Divider, { dividerClasses as classes } from '@mui/material/Divider';
 import describeConformance from '../../test/describeConformance';
 
@@ -83,6 +84,40 @@ describe('<Divider />', () => {
         expect(container.querySelectorAll(`.${classes.textAlignLeft}`).length).to.equal(0);
       });
     });
+
+    describe('custom border style', function test() {
+      before(function beforeHook() {
+        if (/jsdom/.test(window.navigator.userAgent)) {
+          this.skip();
+        }
+      });
+
+      const StyledDivider = styled(Divider)(() => ({
+        borderStyle: 'dashed',
+      }));
+
+      it('should set the dashed border-left-style in before and after pseudo-elements when orientation is vertical', () => {
+        const { container } = render(<StyledDivider orientation="vertical">content</StyledDivider>);
+        expect(
+          getComputedStyle(container.firstChild, '::before').getPropertyValue('border-left-style'),
+        ).to.equal('dashed');
+        expect(
+          getComputedStyle(container.firstChild, '::after').getPropertyValue('border-left-style'),
+        ).to.equal('dashed');
+      });
+
+      it('should set the dashed border-top-style in before and after pseudo-elements when orientation is horizontal', () => {
+        const { container } = render(
+          <StyledDivider orientation="horizontal">content</StyledDivider>,
+        );
+        expect(
+          getComputedStyle(container.firstChild, '::before').getPropertyValue('border-top-style'),
+        ).to.equal('dashed');
+        expect(
+          getComputedStyle(container.firstChild, '::after').getPropertyValue('border-top-style'),
+        ).to.equal('dashed');
+      });
+    });
   });
 
   describe('prop: variant', () => {