diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 906b8c8c36f0d5..d71627820d78e4 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -137,6 +137,8 @@ const DividerRoot = styled('div', { whiteSpace: 'nowrap', textAlign: 'center', border: 0, + borderTopStyle: 'solid', + borderLeftStyle: 'solid', '&::before, &::after': { content: '""', alignSelf: 'center', @@ -149,6 +151,7 @@ const DividerRoot = styled('div', { '&::before, &::after': { width: '100%', borderTop: `thin solid ${(theme.vars || theme).palette.divider}`, + borderTopStyle: 'inherit', }, }, }, @@ -159,6 +162,7 @@ const DividerRoot = styled('div', { '&::before, &::after': { height: '100%', borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`, + borderLeftStyle: 'inherit', }, }, }, diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js index 57f7fbc689a643..7f71c7e59ce7f0 100644 --- a/packages/mui-material/src/Divider/Divider.test.js +++ b/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 { styled } from '@mui/material/styles'; import Divider, { dividerClasses as classes } from '@mui/material/Divider'; import describeConformance from '../../test/describeConformance'; @@ -83,6 +84,40 @@ describe('', () => { 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(content); + 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( + content, + ); + 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', () => {