Skip to content

[core] Support merging of className and style from theme #45975

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 22 commits into
base: master
Choose a base branch
from
Open

[core] Support merging of className and style from theme #45975

wants to merge 22 commits into from
+175 −7

Conversation

sai6855
Copy link
Contributor

@sai6855 sai6855 commented Apr 21, 2025 •
edited
Loading

closes: #45919

@sai6855 sai6855 marked this pull request as draft April 21, 2025 14:39
@sai6855 sai6855 added new feature New feature or request package: material-ui Specific to @mui/material customization: theme Centered around the theming features labels Apr 21, 2025
@mui-bot
Copy link

mui-bot commented Apr 21, 2025 •
edited
Loading

Netlify deploy preview

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

@mui/material/DefaultPropsProvider: parsed: +39.32% , gzip: +34.59%
@mui/material/CssBaseline: parsed: +0.86% , gzip: +0.93%
@mui/material/useMediaQuery: parsed: +3.62% , gzip: +3.54%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against df47431

@sai6855
Copy link
Contributor Author

sai6855 commented Apr 22, 2025

@siriwatknp This PR merges className and style from theme at component level and at slotProps level. here are the tests that validates this https://github.com/mui/material-ui/pull/45975/files#diff-4c87e5840e6a483a36b1ad4e04bc610d9c56f6fef21df6287a7a95439b993944

What do you think about the logic? if you are fine with implementaion, i'll create documention for mergeClassNameAndStyle key

@sai6855 sai6855 requested a review from siriwatknp April 22, 2025 07:51
@sai6855 sai6855 marked this pull request as ready for review April 22, 2025 07:51
@siriwatknp siriwatknp added the on hold There is a blocker, we need to wait label Apr 29, 2025
@siriwatknp
Copy link
Member

Let's wait for @DiegoAndai comment on this.

I'm surprise that there are not request from the community about this both core and x repos.

siriwatknp
siriwatknp reviewed May 19, 2025
View reviewed changes
packages/mui-utils/src/resolveProps/resolveProps.ts Outdated
);
}
}
}
} else if (propName === 'className' && mergeClassNameAndStyle) {
Copy link
Member

Choose a reason for hiding this comment

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

Check props.className so that clsx does not run on every iteration.

Suggested change
} else if (propName === 'className' && mergeClassNameAndStyle) {
} else if (propName === 'className' && mergeClassNameAndStyle && props.className) {

siriwatknp
siriwatknp reviewed May 19, 2025
View reviewed changes
packages/mui-utils/src/resolveProps/resolveProps.ts Outdated
Comment on lines 54 to 56
output[propName] = clsx(
defaultProps?.[propName] as string,
props?.[propName] as string,
Copy link
Member

Choose a reason for hiding this comment

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

I think this can be explicit.

Suggested change
output[propName] = clsx(
defaultProps?.[propName] as string,
props?.[propName] as string,
output.className = clsx(
defaultProps.className,
props.className,

siriwatknp
siriwatknp reviewed May 19, 2025
View reviewed changes
packages/mui-utils/src/resolveProps/resolveProps.ts Outdated
defaultProps?.[propName] as string,
props?.[propName] as string,
) as T[keyof T];
} else if (propName === 'style' && mergeClassNameAndStyle) {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
} else if (propName === 'style' && mergeClassNameAndStyle) {
} else if (propName === 'style' && mergeClassNameAndStyle && props.style) {

siriwatknp
siriwatknp reviewed May 19, 2025
View reviewed changes
packages/mui-utils/src/resolveProps/resolveProps.ts Outdated
Comment on lines 59 to 61
output[propName] = {
...(defaultProps?.[propName] ?? ({} as React.CSSProperties)),
...(props?.[propName] ?? ({} as React.CSSProperties)),
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
output[propName] = {
...(defaultProps?.[propName] ?? ({} as React.CSSProperties)),
...(props?.[propName] ?? ({} as React.CSSProperties)),
output.style = {
...defaultProps.style,
...props.style,

@sai6855 sai6855 mentioned this pull request May 19, 2025
Merged
@sai6855 sai6855 force-pushed the merge-classname-style branch from b69362d to f566486 Compare May 19, 2025 12:32
@sai6855 sai6855 force-pushed the merge-classname-style branch from df47431 to 9ce9f84 Compare May 20, 2025 07:11
@sai6855
Copy link
Contributor Author

sai6855 commented May 20, 2025

@siriwatknp applied your suggestions, now test_types ci check is failing. I tried to debug it but couldn't find the root cause. can you take a look at it once?

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

@siriwatknp siriwatknp siriwatknp left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
customization: theme Centered around the theming features new feature New feature or request on hold There is a blocker, we need to wait package: material-ui Specific to @mui/material
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[material-ui] className and style from theme default props are not merged with the component slotProps
3 participants
@sai6855 @mui-bot @siriwatknp