mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
91.86k stars 31.57k forks source link

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

Open cjl750 opened 2 weeks ago

cjl750 commented 2 weeks ago

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

mui-bot commented 2 weeks ago

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against 48505828a635377f057b357bf405dd78063b3fba

cjl750 commented 4 days ago

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.