refactor: migrate @material-ui v4 → @mui/material v6#953
Merged
Conversation
Removes the long-EOL @material-ui v4 packages (unmaintained since Sep 2021), consolidating on @mui/material v5 which was already partially in use. This is the intermediate checkpoint of the v4→v6 migration; v5→v6 follows in a subsequent commit. - Ran @mui/codemod v5.0.0/preset-safe across src (285 files): import path rewrites, icon renames, makeStyles/withStyles → @mui/styles, theme wrapped in adaptV4Theme() - Manual fixes the codemod can't do: - theme: palette type→mode (via adaptV4Theme), MuiSelect selectMenu→ select, removed dead MuiGrid align-items-xs-center override, breakpoint module augmentation → @mui/material/styles - styled() prop-function → function form + shouldForwardProp (ColorDot ×3, ProgressBar favor prop, StatusBadge status prop) - Dropdown: interface extends SelectProps → type intersection - components/ui barrel: withStyles re-export moved to @mui/styles - formik-material-ui (v4-only, abandoned) → formik-mui v5 (7 files) - notistack 1.x (peer @material-ui/core v4) → notistack v3; per-variant styling moved from classes.variantX to the Components prop with styled MaterialDesignContent; container z-index via containerRoot; removed codemod's stray StyledEngineProvider literal parens - Removed @material-ui/core, @material-ui/icons, @material-ui/lab, formik-material-ui from package.json Grid kept on the legacy API (no Grid2 conversion) — deferred. yarn build, tsc --noEmit, lint:check all green. Zero @material-ui refs.
Second step of the v4→v6 migration (v5 checkpoint in the previous commit). Most breaking changes were handled at the v4→v5 stage; v6 fallout was minimal. - @mui/material, @mui/icons-material, @mui/styles → 6.5.0; @mui/lab → 6.0.1-beta.36 - ConnectWallet: <ListItem button> removed in v6 → <ListItemButton> - Grid kept on the legacy API (Grid2 conversion deferred to a later PR) - adaptV4Theme still ships in v6 (deprecated, removed in v7) so the adapted theme keeps working; @mui/styles JSS bridge still functions yarn build, tsc --noEmit, lint:check green. Unit tests: same 2 pre-existing jsdom-env failures, no new regressions.
✅ Deploy Preview for tezos-homebase ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
# Conflicts: # src/App.tsx # yarn.lock
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrates the entire UI layer off the long-EOL
@material-uiv4 (unmaintained since Sep 2021) to@mui/materialv6, removing a 4+-year-old unpatched dependency, dropping the duplicate JSS+Emotion runtime, and unblocking future React upgrades. 259 source files touched.Done as two commits for reviewability: v4→v5 (where all the hard changes live) then v5→v6 (small).
What changed
Codemod (v4→v5
preset-safe, 285 files): import-path rewrites, icon renames,makeStyles/withStyles→@mui/styles, theme wrapped inadaptV4Theme().Manual fixes the codemod can't do:
theme/index.ts,legacy.ts):palette.type→mode(viaadaptV4Theme),MuiSelect.selectMenu→select, removed deadMuiGridoverride, breakpoint module augmentation →@mui/material/stylesstyled()prop-functions → function form +shouldForwardProp(ColorDot ×3, ProgressBarfavor, StatusBadgestatus)interface extends SelectProps→ type intersection (SelectProps<string>)components/uibarrel:withStylesre-export moved to@mui/stylesformik-material-ui(v4-only, abandoned) →formik-muiv5 (7 files; samecomponent={...}API)notistack1.x (peered on@material-ui/corev4) → v3: per-variant styling moved fromclasses.variantXto theComponentsprop with styledMaterialDesignContent; container z-index viacontainerRootv5→v6: package bumps +
<ListItem button>→<ListItemButton>(ConnectWallet). That was the only v6 type break.Scope notes / deferrals
Grid, so this is safe to defer to its own PR. This was the single biggest risk avoided.adaptV4Themestill ships in v6 (deprecated, removed in v7). The deeply-customized v4 theme (~40 component overrides with&$checked-style pseudo-classes) keeps working through the adapter. Rewriting it to native v6componentsis a follow-up before any v7 bump.@mui/styles(JSS bridge) retained for the 36makeStyles/withStylesfiles. Functions on v6; converting these tostyled()/sxis a follow-up (also required before v7).Test plan
yarn build— greennpx tsc --noEmit— greenyarn lint:check— greenyarn test:unit— same 2 pre-existing jsdom-env failures, no new regressions@material-ui/formik-material-uireferences remain