Skip to content

[material-ui][system] Remove deprecated system props from Box, Stack, Typography#48072

Merged
siriwatknp merged 31 commits intomui:masterfrom
siriwatknp:worktree-remove-system-props
Mar 25, 2026
Merged

[material-ui][system] Remove deprecated system props from Box, Stack, Typography#48072
siriwatknp merged 31 commits intomui:masterfrom
siriwatknp:worktree-remove-system-props

Conversation

@siriwatknp
Copy link
Copy Markdown
Member

@siriwatknp siriwatknp commented Mar 23, 2026 •
edited
Loading

Summary

Remove deprecated system props support from Box, Stack, and Typography components, completing the last item in #47987.

  • Remove extendSxProp usage from createBox, createStack, and Typography
  • Remove SystemProps from type definitions (BoxOwnProps, StackOwnProps, StackProps, TypographyOwnProps)
  • Remove v6Colors and isSxColor check from Typography — color is now only a component prop handled by styled variants
  • Remove (string & {}) from Typography color type — arbitrary strings are no longer accepted, use sx instead
  • Remove internal_createExtendSxProp from pigment-css package.json
  • Update all tests, docs demos, and TypeScript specs to use sx prop
  • Update migration guide with Box, Stack, Typography examples
  • Update deprecation notices in component docs from "will be removed" to "have been removed"
  • Add @typescript-to-proptypes-ignore to ListItemText slotProps to prevent proptypes expansion of Typography fields
  • Add 'inherit' to Link color type — Link explicitly handles color="inherit" for underline behavior
-<Box mt={2} color="primary.main" />
+<Box sx={{ mt: 2, color: 'primary.main' }} />

-<Stack mt={2} alignItems="center" />
+<Stack sx={{ mt: 2, alignItems: 'center' }} />

-<Typography mt={2} fontWeight="bold" />
+<Typography sx={{ mt: 2, fontWeight: 'bold' }} />

-<Typography color="text.secondary" />
+<Typography sx={{ color: 'text.secondary' }} />

Codemod

A new v9.0.0/system-props codemod is added to automate the migration. It lives under v9.0.0 (not v6.0.0) because in v6 system props were only deprecated — they still worked via extendSxProp. In v9, extendSxProp is removed so system props no longer function and must be migrated to sx.

npx @mui/codemod@next v9.0.0/system-props <path>

The v9 codemod extends the v6 version with:

  • color="inherit" on Typography — moved to sx because extendSxProp previously resolved it as CSS color: inherit. Without it, the value would be passed as a raw DOM attribute.
  • color="text.secondary" on Link — moved to sx, while keeping named colors ("primary", "secondary", "inherit") as component props since Link handles them for underline styling.
  • DialogContentText, TimelineContent, TimelineOppositeContent — added as targets since they extend Typography internally.

Closes part of #47987 (the "Remove deprecated system props support from all components" item under "Other deprecations").

@siriwatknp
[material-ui][system] Remove deprecated system props from Box, Stack,…
3c2c967 
… Typography

Remove extendSxProp from Box (createBox), Stack (createStack), Typography.
Remove SystemProps from type definitions (BoxOwnProps, StackOwnProps, StackProps, TypographyOwnProps).
Remove internal_createExtendSxProp from zero-styled.
Update all tests, docs demos, and type specs to use sx prop.
Update migration guide.
@mui-bot
Copy link
Copy Markdown

mui-bot commented Mar 23, 2026 •
edited
Loading

Netlify deploy preview

Bundle size report

Bundle Parsed size Gzip size
@mui/material ▼-567B(-0.11%) ▼-213B(-0.15%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system ▼-8B(-0.01%) ▼-6B(-0.02%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against cad25c7

@siriwatknp siriwatknp marked this pull request as draft March 23, 2026 14:43
siriwatknp and others added 5 commits March 24, 2026 11:45
@siriwatknp
Merge remote-tracking branch 'upstream/master' into worktree-remove-s…
f3a9123 
…ystem-props
@siriwatknp @claude
Move remaining Typography color system props to sx
981c6e7 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Move remaining system props to sx (codemod pass)
15b41dd 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Move system props to sx in Blog template
48e9bf7 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Add TimelineOppositeContent to system props codemod, fix Blog and Tim…
427c447 
…eline demos

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp siriwatknp force-pushed the worktree-remove-system-props branch from 3a6344f to 427c447 Compare March 24, 2026 06:39
@siriwatknp siriwatknp marked this pull request as ready for review March 24, 2026 06:55
@siriwatknp siriwatknp added breaking change Introduces changes that are not backward compatible. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI package: material-ui Specific to Material UI. labels Mar 24, 2026
siriwatknp and others added 14 commits March 24, 2026 13:59
@siriwatknp @claude
Revert zero-styled/index.tsx changes
d282c68 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Prevent proptypes expansion of ListItemText slotProps
979b909 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Remove v6Colors and isSxColor check from Typography
84184f6 
System props are removed, so color is now only a component prop
handled by styled variants in TypographyRoot.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Remove (string & {}) from Typography color type
d529a73 
System props are removed, so the v5 color prop escape hatch
that allowed arbitrary strings is no longer needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Add DialogContentText to system props codemod
ec17865 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Move system props to sx in InfoCard
5c68d16 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Fix codemod to move color="inherit" to sx, run on remaining demos
0ea9858 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Regenerate DenseAppBar preview
c4c0b53 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Fix TypeScript errors: move color="inherit" to sx in specs, add inher…
63c00e5 
…it to Link color type

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Move color="inherit" to sx in onepirate theme Typography usages
4073819 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Update Link codemod to move system prop colors to sx, fix Link demos
172032b 
Link now moves color="text.secondary", color="text.primary", etc. to sx
while keeping named colors (primary, secondary, inherit) as component props.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Update system props codemod tests for inherit and Link color
caa6094 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Move updated system-props codemod to v9.0.0, revert v6.0.0
a6cf00a 
The v6 codemod is for v5→v6 migration (system props deprecated).
The v9 codemod is for v6→v9 migration (system props removed).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp @claude
Add DialogContentText, TimelineContent, TimelineOppositeContent test …
6471fe5 
…cases to v9 codemod

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mnajdova
mnajdova reviewed Mar 24, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are the changes done via the codemod?

Comment thread packages/mui-system/src/Box/Box.test.js Outdated

it('combines system properties with the sx prop', () => {
const { container } = render(<Box mt={2} mr={1} sx={{ marginRight: 5, mb: 2 }} />);
it('applies system properties via the sx prop', () => {
Copy link
Copy Markdown
Member

@mnajdova mnajdova Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the point of the test? Don't we have other tests that test these values?

Copy link
Copy Markdown
Member Author

@siriwatknp siriwatknp Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, removed.

@siriwatknp
Copy link
Copy Markdown
Member Author

siriwatknp commented Mar 24, 2026

Are the changes done via the codemod?

Yes, the new v9.0.0/system-props is created, it's similar to v6.0.0/system-props but with some behavior different to match the breaking change.

@ZeeshanTamboli ZeeshanTamboli mentioned this pull request Mar 24, 2026
Closed
49 tasks
ZeeshanTamboli
ZeeshanTamboli reviewed Mar 24, 2026
View reviewed changes
Comment thread docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
Comment thread packages/mui-system/src/Stack/createStack.tsx
silviuaavram
silviuaavram approved these changes Mar 24, 2026
View reviewed changes
Comment thread packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props.actual.js
@@ -0,0 +1,61 @@
import { Box as Boxxx, Grid as Griddd, Grid2 as Griddd2 } from '@mui/material';
Copy link
Copy Markdown
Member

@silviuaavram silviuaavram Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need to duplicate the last character?

Copy link
Copy Markdown
Member Author

@siriwatknp siriwatknp Mar 25, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To ensure that if user import the component using alias, the codemod still account for.

@siriwatknp @claude
Fix optional chaining in codemod color matchers for dynamic values
cad25c7 
Add ?. to .startsWith() and .match() calls in typographyColorMatcher
and Link matcher to prevent crashes when color prop is an expression
(e.g., color={someVar}) where val.value is undefined.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@siriwatknp siriwatknp enabled auto-merge (squash) March 25, 2026 02:31
@siriwatknp siriwatknp merged commit 8663368 into mui:master Mar 25, 2026
23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mnajdova mnajdova mnajdova left review comments

@ZeeshanTamboli ZeeshanTamboli ZeeshanTamboli left review comments

@silviuaavram silviuaavram silviuaavram approved these changes

@mj12albert mj12albert Awaiting requested review from mj12albert

Assignees

No one assigned

Labels

breaking change Introduces changes that are not backward compatible. package: material-ui Specific to Material UI. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@siriwatknp @mui-bot @mnajdova @silviuaavram @ZeeshanTamboli