[button][fab][menu item][list item button] Remove duplicated className entries#48213
Conversation
Netlify deploy previewhttps://deploy-preview-48213--material-ui.netlify.app/ Bundle size report
|
There was a problem hiding this comment.
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.rootfrom theclassNamepassed toButtonRoot, relying on the existingclasses={classes}forwarding to apply utility classes once.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
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: {}}}
>|
I guess it's a regression since #25072. The issue is also present in v5: https://v5.mui.com/material-ui/react-button/. |
2f58e1d to
f9630ad
Compare
|
IMO, we should also cherry-pick this to v7. |
dcd70fb to
aaffd00
Compare
|
Cherry-pick PRs will be created targeting branches: v7.x |
Fixes #48189.
Do not send
classes.rootto the ButtonBaseclassesas it will end up in duplicated classes. Affected components: