[material-ui][Divider] Fix CSS specificity order

[o-alexandrov]

• I have followed (at least) the PR section of the contributing guide.

There's currently CSS specificity order issue.
If a user has a global CSS override, such as:

span: {
  whiteSpace: `pre-line`
}

Then Divider component will become broken, there'll be extra line breaks

that's because the whiteSpace: 'nowrap' is currently set on the parent HTML element, instead of the actual wrapper.

[ZeeshanTamboli]

Can you provide a live reproduction of the issue in the form of StackBlitz or CodeSandbox?

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against c9d3dcf

[o-alexandrov]

@ZeeshanTamboli

See this repo for the repro; it's based on MUI's pigment vite example (but it isn't related to Pigment).

• npm run dev to start
  Or on stackblitz: https://stackblitz.com/github/o-alexandrov/material-ui-pigment-css-vite-ts

Then, here's a video on how to reproduce how this PR fixes it (removing style from the parent HTML element and applying to the span with text)

Screen.Recording.2024-10-27.at.6.29.49.AM.mov

[ZeeshanTamboli]

Looks good!