[material-ui][Divider] dashed borderStyle does not work for Divider with text

[caseylum]

Steps to reproduce

Link to live example: demo

Steps:

1. Create a StyledDivider with borderStyle: 'dashed'
2. Render a StyledDivider with no child
3. Render a StyledDivider with child text element
4. The second divider is not dashed.

Current behavior

When two of the same StyledDivider components are rendered, the one with child text is not dashed

Expected behavior

Both StyledDividers should be dashed

Context

A dashed Divider with text

Your environment

npx @mui/envinfo

  in my project, I'm viewing a pdf in Google Chrome
  I'm using the CodeSandbox in Chrome as well

  System:
    OS: macOS 14.5
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.142
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4 
    @emotion/styled: 11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.19 
    @mui/icons-material: 5.15.19 => 5.15.19 
    @mui/material: 5.15.19 => 5.15.19 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react: 17.0.75 => 17.0.75 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.9.5 => 4.9.5 

Search keywords: Divider, borderStyle, dashed

[appleSimple]

using borderTopStyle each pseudo elements(::before, ::after).

like this, demo.

const StyledDivider = styled(Divider)(({}) => ({
  '&::before': {
    width: '3.75rem',
    flex: '0 0 3.75rem',
    borderTopStyle: 'dashed',
  },
  '&::after': {
    borderTopStyle: 'dashed',
  },
}));

this issue occurs file Divider.js.

const DividerRoot = styled('div', {
...
    {
      props: ({ ownerState }) => {
        console.log('ownerState', ownerState);
        return ;
      },
      style: {
        '&::before, &::after': {
          width: '100%',
          borderTop: `thin solid ${(theme.vars || theme).palette.divider}`, // this line!!
        },
      },
    },
...
}));

[DiegoAndai]

Hey @caseylum, thanks for the report. And thanks @appleSimple, for providing a workaround 🎉.

Ideally, borderStyle should work, so I'm accepting this as an enhancement. There's a PR up already so we can continue the work there 🙌🏼

[anuujj]

I would be happy to take it up. The idea is to inherit the border-style in before and after pseudo elements from DividerRoot in case DividerRoot has children.