[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.