Skip to content

[material-ui] Clean up duplicated CSS rules#47838

Merged
sai6855 merged 2 commits intomui:masterfrom
sai6855:fix-styles
Mar 3, 2026
Merged

[material-ui] Clean up duplicated CSS rules#47838
sai6855 merged 2 commits intomui:masterfrom
sai6855:fix-styles

Conversation

@sai6855
Copy link
Copy Markdown
Member

@sai6855 sai6855 commented Feb 22, 2026 •
edited
Loading

This PR removes repeated style rules in the code to make the styling cleaner and prevent conflicts

@mui-bot
Copy link
Copy Markdown

mui-bot commented Feb 22, 2026 •
edited
Loading

Netlify deploy preview

https://deploy-preview-47838--material-ui.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/material ▼-186B(-0.04%) ▼-15B(-0.01%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against d839f20

@sai6855 sai6855 changed the title [material-ui] Fix duplicate styles [material-ui] Clean up duplicated CSS rules Feb 22, 2026
@zannager zannager added scope: tooltip Changes related to the tooltip. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI and removed scope: tooltip Changes related to the tooltip. labels Feb 23, 2026
@sai6855 sai6855 added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Feb 27, 2026
@sai6855 sai6855 marked this pull request as ready for review February 27, 2026 15:31
Copilot AI review requested due to automatic review settings February 27, 2026 15:31
Copilot AI reviewed Feb 27, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR consolidates duplicate CSS rules across multiple Material-UI components to improve code maintainability and reduce redundancy. The changes combine selectors with identical styles using comma-separated syntax, which is an established pattern in the codebase.

Changes:

  • Combined CSS selectors for active/completed states in StepLabel and StepIcon components
  • Merged duplicate variant objects in SpeedDialIcon component
  • Consolidated Typography selector rules in ListItemText and CardHeader components

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/mui-material/src/StepLabel/StepLabel.js Combined .active and .completed selectors with identical color/fontWeight styles
packages/mui-material/src/StepIcon/StepIcon.js Merged .completed and .active selectors with identical color styles
packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js Consolidated duplicate variant objects checking ownerState.open by merging openIcon styles into single variant
packages/mui-material/src/ListItemText/ListItemText.js Combined primary and secondary Typography selectors with identical display property
packages/mui-material/src/CardHeader/CardHeader.js Merged title and subheader Typography selectors with identical display property

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

silviuaavram
silviuaavram reviewed Mar 2, 2026
View reviewed changes
Comment thread packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js
[`& .${speedDialIconClasses.icon}`]: {
transform: 'rotate(45deg)',
},
[`& .${speedDialIconClasses.openIcon}`]: {
Copy link
Copy Markdown
Member

@silviuaavram silviuaavram Mar 2, 2026

Choose a reason for hiding this comment

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

I'm not 100% familiar with this part yet. Is this the same as the rule below, where we have ownerState.open?

Copy link
Copy Markdown
Member Author

@sai6855 sai6855 Mar 2, 2026

Choose a reason for hiding this comment

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

File actually had duplicated variant block where props: ({ ownerState }) => ownerState.open

Block 1 is this => https://github.com/sai6855/material-ui/blob/d839f20151b49d97610eaea8b0f884765502952b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js#L60

Other block i had removed here https://github.com/mui/material-ui/pull/47838/changes#diff-e464bf0b1e5a928e7ddbf84959a83bc5202e35057df3a288579c553b81444e76L76

So instead of having multiple props: ({ ownerState }) => ownerState.open , i moved both to 1 variant block

@silviuaavram
Copy link
Copy Markdown
Member

silviuaavram commented Mar 2, 2026

This needs to be cherry picked right?

@sai6855 sai6855 added v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels Mar 2, 2026
@sai6855
Copy link
Copy Markdown
Member Author

sai6855 commented Mar 2, 2026

This needs to be cherry picked right?

Yes added tags

@sai6855 sai6855 merged commit f6d6fc5 into mui:master Mar 3, 2026
29 checks passed
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 3, 2026

Cherry-pick PRs will be created targeting branches: v7.x

github-actions Bot pushed a commit that referenced this pull request Mar 3, 2026
@sai6855 @web-flow
[material-ui] Clean up duplicated CSS rules (#47838)
5d60f7f
@github-actions github-actions Bot mentioned this pull request Mar 3, 2026
Merged
@joshkel joshkel mentioned this pull request Mar 8, 2026
Closed
ZeeshanTamboli added a commit that referenced this pull request Mar 10, 2026
@joshkel @ZeeshanTamboli
[material-ui] Partially revert "[material-ui] Clean up duplicated CSS…
fbac645 
… rules (#47838)" (#47927)

Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
github-actions Bot pushed a commit that referenced this pull request Mar 10, 2026
@joshkel @ZeeshanTamboli @web-flow
[material-ui] Partially revert "[material-ui] Clean up duplicated CSS…
2473953 
… rules (#47838)" (#47927)

Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
ZeeshanTamboli added a commit that referenced this pull request Mar 10, 2026
@github-actions @joshkel @ZeeshanTamboli
[material-ui] Partially revert "[material-ui] Clean up duplicated CSS…
95421ba 
… rules (#47838)" (@joshkel) (#47938)

Co-authored-by: Josh Kelley <joshkel@gmail.com>
Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@silviuaavram silviuaavram silviuaavram approved these changes

@siriwatknp siriwatknp Awaiting requested review from siriwatknp

Assignees

No one assigned

Labels

needs cherry-pick The PR should be cherry-picked to master after merge. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. v7.x

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@sai6855 @mui-bot @silviuaavram @zannager