[material-ui][Divider] To propose usability improvements for Divider component when has children.

[appleSimple]

fixes #42569

If Divider component has children, rendered using 'div' tag but border style actually in pseudo elements(::befote, ::after)
So custom style applied only div tag like below.

const StyledDivider = styled(Divider)(({}) => ({
  "&::before": {
    width: "3.75rem",
    flex: "0 0 3.75rem",
  },
  borderStyle: `dashed`, // this is apply only 'div'
}));

If we want to use it immediately, use this way.

but someone don't know border "top" style, or border "bottom" style ~ whatever.
This PR simply requires writing "borderStyle" in the pseudo-element.

example

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

Thanks for read!

[mui-bot]

Netlify deploy preview

https://deploy-preview-42596--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 461e9a8

[DiegoAndai]

Hey @appleSimple! Thanks for working on this.

I think the change does not fix the issue, though. Here's a condesandbox using this PR's build, you can see that the issue is still present: https://codesandbox.io/p/sandbox/pr-42596-1-w7fd9h

[appleSimple]

@DiegoAndai
Thank you for your reply.
yeah, I think so and unfortunately this PR should be rejected or closed. 😂
Can I close it?

[DiegoAndai]

Can I close it?

Sure, if you don't plan to work on it feel free to close it, I'll mark the issue as ready to take 😊