diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 26784a02c5daee..a356c9760d10fb 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -102,6 +102,8 @@ const DividerRoot = styled('div', { whiteSpace: 'nowrap', textAlign: 'center', border: 0, + borderTopStyle: 'solid', + borderLeftStyle: 'solid', '&::before, &::after': { content: '""', alignSelf: 'center', @@ -114,6 +116,7 @@ const DividerRoot = styled('div', { '&::before, &::after': { width: '100%', borderTop: `thin solid ${(theme.vars || theme).palette.divider}`, + borderTopStyle: 'inherit', }, }), }), @@ -124,6 +127,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 2dfd208d321d3e..0d2eccb6a6b09f 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', () => {