🐛 Repair the UI regressions from the MUI 9 upgrade - #910
Merged
Conversation
MUI 9 removed support for system props on components: layout props passed directly to Stack, Box, Grid or Typography are no longer translated into CSS and end up as plain DOM attributes instead. That silently broke every flex row in the admin UI, most visibly the ticker headline and the message form toolbar. Move alignItems, justifyContent, display, flexGrow and spacing props into sx, and switch Typography colours to values MUI 9 still resolves. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The MUI 9 upgrade also dropped a set of APIs the theme and a few components still used, all of them without a runtime error: - Button style overrides keyed by variant and colour (containedInherit and friends) are gone; express them as style variants instead. - CardHeader takes slotProps for its title and subheader typography. - Typography no longer has a paragraph prop, so its override is dead code. - Popover takes slotProps.paper instead of PaperProps, TextField takes slotProps.input instead of InputProps. Opening the ticker list row menu additionally threw, because MenuItem now requires a MenuListContext. Wrap the items in a MenuList, as already done for the user list. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The global JSX namespace is gone with React 19, NodeJS.Timeout is no longer exported, and useRef requires an explicit initial value. Use ReactElement, derive the timer type from setTimeout, and reference globalThis in the test. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
0x46616c6b
marked this pull request as ready for review
August 19, 2026 17:49
|
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
The MUI 9 upgrade (#891) broke the admin UI in several places without producing a single runtime error, most visibly on the ticker view: the Configure button collapsed onto the headline and the message form toolbar stacked vertically instead of forming a row.
The cause is that MUI 9 removed support for system props. Layout props passed directly to a component —
alignItems,justifyContent,display,flexGrow,mb— are no longer turned into CSS and are forwarded to the DOM as attributes:Moving them into
sxrestores the previous layout.Typographycolours needed the same treatment: dotted palette paths such ascolor="text.secondary"are no longer resolved.Auditing the rest of the upgrade surfaced more silent breakage:
Buttonstyle overrides keyed by variant and colour (containedInherit,containedPrimary, …) no longer exist and are now expressed as style variants, which is what restores the button shadows.CardHeadertakesslotPropsfor title and subheader typography;Typographylost itsparagraphprop, making that override dead code.PopovertakesslotProps.paperinstead ofPaperProps,TextFieldtakesslotProps.inputinstead ofInputProps— the latter dropped the phone icon from the Signal admin form.MenuListContext is missing, because MUI 9'sMenuItemrequires aMenuList. The user list had already been fixed for this, the ticker list had not.The last commit clears the remaining type errors from the React 19 and Node type upgrades (the global
JSXnamespace,NodeJS.Timeout,useRefwithout an initial value), so thatnpm run tscpasses again.Why it slipped through
tscalready flagged most of these as type errors, but no workflow runs it —integration.ymlonly tests and builds, and Vite's build does not type-check. Addingnpm run tscto CI would have caught the upgrade, and is worth doing in a follow-up.🤖 Generated with Claude Code