[docs][material-ui][theme] Add documentation on migrating JSS's alternative, array-based syntax to syntax supported by Emotion

[cjl750]

Added a section to the page on breaking style and theme changes in v5 about migrating the alternative, array-based syntax for space- and comma-separated values to string-based values necessary for use with Emotion.

Since everything under the heading "Migrate theme styleOverrides to Emotion" was about refactoring local rule references, I opted to take the content in that section and put it under a new sub-header (so the existing h3s became h4s), then I added a second sub-header for the new section about migrating the alternative, array-based syntax.

This is to resolve #41971

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

[mui-bot]

Netlify deploy preview

• docs/data/material/migration/migration-v4/v5-style-changes.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 4850582

[ZeeshanTamboli]

@cjl750 Thanks for the pull request. It looks good to me! We need another review from @DiegoAndai to confirm whether we should consider documenting this, as it wasn't requested before and doesn't seem to be a common use case. However, I see no issue with documenting it.

[DiegoAndai]

Hey @cjl750! Thanks for working on this

Correct me if I'm wrong, but the usage in v4 would be:

const theme = createTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        padding: [[20, 10]],
      },
    },
  },
});

(Codesandbox)

If so, we should include this as the starting point.

[cjl750]

Hi @DiegoAndai

Correct me if I'm wrong, but the usage in v4 would be:

const theme = createTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        padding: [[20, 10]],
      },
    },
  },
});

You're right, that would be what you'd have in your v4 theme. I was keeping the pattern in the diff for the local rule overrides in that same section of the page, which shows the theme already converted to use styleOverrides. Now that you mention it, though, that does seem a bit out of order.

Looks like converting to styleOverrides is covered further down the page, under the heading "Theme structure." Perhaps it'd make more sense to rearrange the page a bit to move the "Theme structure" section toward the top and then move "Migrate theme styleOverrides to Emotion" below that? I can work that into this PR if you want, but rearranging seems like a good idea to me regardless of what happens with this PR, so maybe you all would prefer to do it separately. Let me know what you think.