Migrate to MUI v9#1520
Open
glebcha wants to merge 13 commits into
Open
Conversation
…ettier 3.8 - packageManager: pnpm@9.3.0 → pnpm@11.1.0 - engines.node: >=16.0.0 → >=24.0.0 - turbo: 2.3.3 → 2.9.14 - prettier: ^3.4.2 → ^3.8.3 - pnpm-workspace: add allowBuilds for core-js and esbuild (required by pnpm v11 security policy)
…Resolution
- rollup.config.mjs: assert { type: 'json' } → with { type: 'json' }
(Node.js 24 removed the assert keyword for import attributes)
- tsconfig.json + tsconfig.node.json: moduleResolution: "node" → "bundler"
(TypeScript 6 deprecates node/node10; bundler is correct for Vite/Rollup)
main.ts: - Remove getAbsolutePath() helper that used require.resolve (CJS-only, broken in Storybook 10 which loads config as native ESM) - Pass addon names as plain strings (Storybook 10 resolves them automatically) - Remove @storybook/addon-essentials and @storybook/addon-storysource (no v10 release) - Remove docs.autodocs option (removed from DocsOptions in Storybook 10) preview.tsx: - '@storybook/preview-api' → 'storybook/preview-api' (merged into storybook core) - Remove actions.argTypesRegex parameter (removed in Storybook 9)
…ite 8, TypeScript 6 Breaking peer dependency changes: - @mui/material: >=6 → >=9.0 - @mui/icons-material: >=6 → >=9.0 - @mui/x-date-pickers: >=7.15 → >=9.0 - react / react-dom: >=18.0 → >=19.0 Internal dependency updates: - @tanstack/react-table: 8.20.6 → 8.21.3 - @tanstack/react-virtual: 3.11.2 → 3.13.24 Dev dependency updates: - typescript: 5.7.2 → 6.0.3 - vite: ^6.0.5 → ^8.0.13 - @vitejs/plugin-react: ^4.3.4 → ^6.0.2 - storybook + addons: ^8.4.7 → ^10.4.0 - storybook-dark-mode: ^4.0.2 → ^5.0.0 - Removed: @storybook/addon-essentials, @storybook/blocks, @storybook/preview-api, @storybook/addon-storysource (merged into core or abandoned) Bundle size limits adjusted for updated TanStack bundle: - dist/index.js: 55 KB → 56 KB - dist/index.esm.js: 51 KB → 52 KB Version: 3.2.1 → 4.0.0
style.utils.ts: - Add mrtAlpha/mrtLighten/mrtDarken: wrappers around MUI color helpers that detect CSS custom property values (var(--mui-palette-...)) used by MUI v9's default colorScheme mode and fall back to CSS color-mix() instead of throwing - Add resolveBaseBackground: picks an appropriate fallback when the base background color is a CSS variable - Migrate all internal alpha/darken/lighten calls to the new safe wrappers utils.ts: - Add resolveSlotProps<T>: merges MRT user-provided slotProps (object or function returning object) with component defaults, preserving the function form when needed so downstream consumers can still override per-instance
Breaking API changes applied across 44 component files:
sx prop:
- Replace all `sx={[...] as any}` spreads with properly typed sx array syntax
- Typography/ToolbarDropZone: fontStyle="italic" → sx={{ fontStyle: 'italic' }}
slotProps migration:
- TextField: inputProps/InputProps/inputRef → slotProps.htmlInput/input
- TextField: InputLabelProps → slotProps.inputLabel
- TextField: SelectProps → slotProps.select
- Select: inputProps → slotProps.input
- Checkbox: inputProps → slotProps.input
- Drawer: PaperProps → slotProps.paper (via resolveSlotProps)
Date picker types (types.ts):
- DatePickerProps<never> → DatePickerProps (generic removed in x-date-pickers v9)
- DateTimePickerProps<never> → DateTimePickerProps
- TimePickerProps<never> → TimePickerProps
MRT_FilterTextField:
- Extract pickerTextFieldProps via IIFE to forward only the structurally
compatible styling/state props to PickersTextField (which renders a <div>
with a different slotProps shape and HTMLDivElement event handlers)
- Import PickerValidDate and use correct value type for date picker controls
Other removals:
- Remove unused parseFromValuesOrFunc imports in ToolbarDropZone/InternalButtons
- Remove duplicate Theme import in MRT_TableHeadCell
- Search.stories.tsx: InputLabelProps → slotProps.inputLabel
- Virtualization.stories.tsx: Stack alignItems+direction → sx object
- fullscreen-with-appbar.stories.tsx: Box padding={2} → sx={{ padding: 2 }}
- @mui/material: ^6.2.1 → ^9.0.0 - @mui/icons-material: ^6.2.1 → ^9.0.0 - @mui/x-date-pickers: ^7.23.3 → ^9.0.0 - @mui/x-charts: ^7.23.2 → ^9.2.0 - @tanstack/react-table-devtools: ^8.20.6 → ^8.21.3 Resolves SSR crash: MUI v9's styleFunctionSx was receiving a MUI v6 theme from the docs app, causing createEmptyBreakpointObject to read undefined.
…UI v9
MUI v9 removes shorthand system props from Typography, Stack, and Drawer;
all spacing/layout props must now go through sx.
- BlogAuthor.tsx: fontSize="14pt" → sx={{ fontSize: '14pt' }}
- SourceCodeSnippet.tsx (x2): textTransform="capitalize" → sx={{ textTransform: 'capitalize' }}
- Footer.tsx: textAlign="center" → sx={{ textAlign: 'center' }}
- MiniNav.tsx: mt="1rem" → sx={{ mt: '1rem' }}
- Sidebar.tsx: PaperProps={{ component: 'aside' }} → slotProps={{ paper: { component: 'aside' } }}
MUI v9 removes gap, p, direction, alignItems, minHeight as shorthand props on Stack and Typography; they must be passed via sx instead. Affected examples: - custom-column-filtering-ui: Stack direction+gap, Stack p+gap - customize-remove-column-grouping: Stack direction+alignItems - enable-column-grouping: Stack gap - external-toolbar: Typography p - lazy-detail-panel: Stack gap+minHeight
- _app.tsx: page title and meta description V3/V6 → V4/V9 - index.tsx: alert banner, title sup, Material UI version badge, migration link
READMEs: V3 → V4, Material UI V6 → V9, React 18 → React 19, updated TanStack internal dependency version notes. MIGRATION.md: new file documenting all 18 migration phases from MRT v3 to v4, covering MUI v9, React 19, Node.js 24, pnpm v11, TypeScript 6, Vite 8, Storybook 10, Prettier 3.8, Turbo 2.9, TanStack updates, and docs app upgrade. Includes before/after code snippets, rationale, and breaking changes for consumers.
- packages/material-react-table/package.json: name → @glebcha/material-react-table - apps/material-react-table-docs/package.json: workspace ref updated - All import statements in docs app (146 files) updated via sed - pnpm-lock.yaml regenerated
|
@glebcha is attempting to deploy a commit to the Kevin Vandy OSS Team on Vercel. A member of the Team first needs to authorize it. |
|
@KevinVandy it would be great if you comment on the intention of OG MRT on merging this or recommendation on moving to new package. May be your thoughts on giving manaintaner permission to other devs like @glebcha here? I want to be clear I am not asking to an ETA just curious about where OG MRT team is standing about continuous support for newer MUI versions. This lib is amazing and over the time it became essential in our React + MUI stack. |
Owner
|
As soon as TanStack Table v9 is stable, hopefully within the next couple months, I'm announcing both MRT libraries as deprecated from installing via NPM. They will live on in the official TanStack Table docs as copy and pastable examples. This will be a win for everyone, as you will never need to wait on a bug fix from me ever again. Just modify the code how you want to. |
|
Thank you so much for input! We will adjust our upgrade plan to be in sync with this then. Always grateful to you and TanStack team! |
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
3 participants
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.
Related to #1516