migrate mui from v6 to v7#4480
Open
Forfold wants to merge 16 commits intomui-upgradefrom
Open
Conversation
Replace <Hidden> with sx display rules (Hidden is removed in v7) and collapse the @mui/material/styles/createPalette deep import into the public entry point. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Remove @mui/styles makeStyles usage from Icons, CreateFAB, FlatList, FlatListItem, ListHeader, PageControls, ClickableText, CopyText, SkipToContentLink, SpeedDial, AlertCountLineGraph, and materialStyles. Replace with inline sx props, local const classes objects, and a plain CSS file for CSSTransition class names (flatListTransitions.css).
Remove @mui/styles makeStyles from AdminAPIKeys, AdminConfig, AdminLimits, AdminSMSSend, AdminSection, AdminToolbox, SlackActions, AdminAlertCounts, AlertCountTable, AdminAPIKeyDrawer, AdminAPIKeyExpirationField, AdminMessageLogDrawer, and AdminMessageLogsLayout. Replace with inline sx props, Box components for theme-dependent responsive styles, and slotProps for Dialog paper styling.
Remove @mui/styles makeStyles from AlertDetailLogs, AlertsList, CreateAlertDialog, and AlertCountGraph. Replace with inline sx props and a plain CSS file for the recharts Bar hover cursor (AlertCountGraph.css).
- Update @mui/material, @mui/icons-material, @mui/system from 6.5.0 to 7.3.10 - Update @mui/x-data-grid from 6.20.4 to 7.29.12 - Remove @mui/styles package (no longer needed) - Grid v2: remove 'item' prop, migrate xs/sm/md/lg/xl to 'size' prop - DataGrid v7: update valueGetter/valueFormatter signatures, components to slots - FormControlLabel: slotProps.label to slotProps.typography - Fix theme.mixins.toolbar type cast - Fix GridSortModel type usage - Remove deprecated 'hide' column property
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.
make checkto catch common errors. Fixed any that came up.Description:
Upgrades MUI (Material UI) from v6 to v7 across the entire frontend.
Package upgrades:
@mui/material@mui/icons-material@mui/system@mui/x-data-grid@mui/stylesKey changes:
@mui/styles/makeStylesentirely — all ~86 files usingmakeStyleshave been migrated to thesxprop. This removes the dependency on the legacy JSS-based styling engine, which was dropped in MUI v7.Hiddencomponent and deep/private imports as part of v7 prep (these were removed upstream).sxprop approach is more concise than themakeStylespattern.Which issue(s) this PR fixes:
Continues the MUI upgrade path started in the v5 → v6 PR. Resolves the remaining
@mui/stylestech debt flagged during the v6 upgrade.Out of Scope:
Screenshots:
N/A — no visual changes intended. This is a dependency upgrade and styling engine migration.
Describe any introduced user-facing changes:
None. All styling changes are internal refactors producing the same visual output.
Describe any introduced API changes:
None.
Additional Info:
This PR is stacked on top of the v5 → v6 MUI upgrade branch (
mui-upgrade). The migration was done incrementally:Hiddencomponent and deep importsmakeStyles→sxacross all components (admin, alerts, lists, main, schedules, rotations, services, users, util, calendar, explore)make checkissues