Skip to content

[button][fab][menu item][list item button] Remove duplicated className entries#48213

Merged
silviuaavram merged 4 commits intomui:masterfrom
silviuaavram:fix/duplicated-button-classnames
Apr 14, 2026
Merged

[button][fab][menu item][list item button] Remove duplicated className entries#48213
silviuaavram merged 4 commits intomui:masterfrom
silviuaavram:fix/duplicated-button-classnames

Conversation

@silviuaavram
Copy link
Copy Markdown
Member

@silviuaavram silviuaavram commented Apr 6, 2026

Fixes #48189.

Do not send classes.root to the ButtonBase classes as it will end up in duplicated classes. Affected components:

  • Button
  • FAB
  • MenuItem
  • ListItemButton

@silviuaavram silviuaavram self-assigned this Apr 6, 2026
Copilot AI review requested due to automatic review settings April 6, 2026 15:31
@silviuaavram silviuaavram added type: bug It doesn't behave as expected. scope: button Changes related to the button. labels Apr 6, 2026
@silviuaavram silviuaavram marked this pull request as draft April 6, 2026 15:31
@mui-bot
Copy link
Copy Markdown

mui-bot commented Apr 6, 2026

Netlify deploy preview

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

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+64B(+0.01%) 🔺+29B(+0.02%)
@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 aaffd00

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 fixes duplicated CSS class entries on the Material UI Button root element by avoiding passing the same utility classes through both className and the classes prop path (via ButtonBase).

Changes:

  • Remove classes.root from the className passed to ButtonRoot, relying on the existing classes={classes} forwarding to apply utility classes once.

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

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.

I think we should omit classes.root when we propagate the classes prop instead. We should do that on all components using ButtonBase.

What I meant was doing this:

    <ButtonRoot
      ownerState={ownerState}
      className={clsx(contextProps.className, className, classes.root, positionClassName)}
      component={component}
      disabled={disabled || loading}
      focusRipple={!disableFocusRipple}
      focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
      ref={ref}
      internalNativeButton
      type={type}
      id={loading ? loadingId : idProp}
      {...other}
      // classes.root is already propagated in the className prop
      classes={{...classes, root: {}}}
    >

@ZeeshanTamboli
Copy link
Copy Markdown
Member

I guess it's a regression since #25072. The issue is also present in v5: https://v5.mui.com/material-ui/react-button/.

@silviuaavram silviuaavram force-pushed the fix/duplicated-button-classnames branch from 2f58e1d to f9630ad Compare April 9, 2026 05:57
@silviuaavram silviuaavram marked this pull request as ready for review April 9, 2026 05:57
@ZeeshanTamboli
Copy link
Copy Markdown
Member

IMO, we should also cherry-pick this to v7.

@silviuaavram silviuaavram added v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels Apr 14, 2026
@silviuaavram silviuaavram force-pushed the fix/duplicated-button-classnames branch from dcd70fb to aaffd00 Compare April 14, 2026 08:58
@silviuaavram silviuaavram merged commit 42d5bde into mui:master Apr 14, 2026
19 checks passed
@silviuaavram silviuaavram deleted the fix/duplicated-button-classnames branch April 14, 2026 10:55
@silviuaavram silviuaavram changed the title [button] Remove duplicated className entries [button][fab][menu item][list item button] Remove duplicated className entries Apr 14, 2026
@github-actions
Copy link
Copy Markdown

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs cherry-pick The PR should be cherry-picked to master after merge. scope: button Changes related to the button. type: bug It doesn't behave as expected. v7.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Button] Duplicate classes

6 participants