Skip to content

migrate mui from v5 to v7#2811

Open
junjun107 wants to merge 5 commits into
developfrom
migrate-MUI
Open

migrate mui from v5 to v7#2811
junjun107 wants to merge 5 commits into
developfrom
migrate-MUI

Conversation

@junjun107

@junjun107 junjun107 commented Jun 16, 2026

Copy link
Copy Markdown
Member

Upgrade Material UI from v5 to v7

Summary

Upgrades the client from MUI v5 to v7, including MUI X packages.
Removes @mui/lab, migrates legacy Grid to the new v7 API
Updates Data Grid / date picker APIs.
Theme files were not modified — existing createTheme setup and component overrides remain compatible with v7.
Pin Node 22 in Playwright workflow
Regenerate lock file

Package changes

Package Before After
@mui/material v5.16.7 v7
@mui/icons-material v5.16.7 v7
@mui/system, @mui/utils v7
@mui/x-data-grid v5.17.20 v7.29.9
@mui/x-date-pickers v6.8.0 v7.29.4
@mui/lab v5 alpha removed
react / react-dom 18.2 18.3.1

react-is is pinned to 18.3.1 in package.json overrides (required for React 18 + MUI v7).

Code changes

Admin (~12 files)

  • Legacy Grid (item, xs, sm) → new Grid API (size prop) across org edit tabs, SearchCriteria
  • VerificationAdminGridMui — Data Grid v7 APIs (GridRowSelectionModel, onRowSelectionModelChange, value getters)
  • OpenTimeForm — date picker error props coerced to boolean; time validation helper text
  • Textareaerror prop coerced to boolean
  • ConfirmEmail@mui/lab/LoadingButtonButton with loading prop

Food Seeker (7 files)

  • ResultsFilters, StakeholderPreview, StakeholderDetailsGrid2 / Unstable_Grid2Grid with size
  • Suggestion, AdvancedFilters, CorrectionDialog, layouts/Mobile — Grid migration + minor type fix for react-draggable

Account (5 files)

  • Login, Register, Profile, ForgotPassword, ConfirmEmail — Grid migration + loading button

Static pages (1 file)

  • Donate.tsx — Grid migration (zeroMinWidthsize="grow")

Theme

  • No changesclient/src/theme/ untouched. Custom palette, button variants (gray, recenter), link variants, and component overrides work as before.

Unchanged MUI usage (spot-check only)

  • Home, Contact, About, Faq, search Desktop layout, most filter/map components
  • Admin Table pages (Announcements, Tags, Features, Logins, etc.) — no code changes

junjun107 and others added 3 commits June 29, 2026 17:12
Resolve conflicts in ResultsFilters and ResultsMap by combining the
widen-address-bar layout from develop with MUI v7 Grid/Box migrations.

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment