[material-ui] Migrate components to support CSS extraction#42001
[material-ui] Migrate components to support CSS extraction#42001siriwatknp merged 66 commits intomui:nextfrom
Conversation
siriwatknp
added
scope: dialog
| transformLibraries: ['local-ui-lib'], | ||
| sourceMap: true, | ||
| displayName: true, | ||
| overrideContext: (context) => { |
There was a problem hiding this comment.
Adding this here fixes the issue? Should this then be made part of the library itself?
There was a problem hiding this comment.
Yes, I can confirm that this prevents the error. I added here just to be a workaround but if you think it should be a part of Pigment, I am happy to add it. However, I think it should be a separate package for integrating with MUI system, not a part of nextjs/vite plugin.
There was a problem hiding this comment.
If this would be required for every project that uses Material UI and Pigment CSS, we should make it part of the library. Do we know why it is required tough? Maybe we are fixing a symptom, not the problem
siriwatknp
force-pushed
the
mui/css-extraction-2
branch
from
e4f4831 to
279e4cc
Compare
siriwatknp
added
component: LoadingButton
DiegoAndai
left a comment
DiegoAndai
left a comment
There was a problem hiding this comment.
Amazing job with the codemod Jun, congrats 🎉
I just have some comments but they're not blockers, LGTM
| indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon, | ||
| inputProps, | ||
| size = 'medium', | ||
| disableRipple = false, |
There was a problem hiding this comment.
Otherwise, variants won't work because disabled=undefined
variants: [
{ props: { color: 'default', disableRipple: false } }, style: { … } },
]| transformLibraries: ['local-ui-lib'], | ||
| sourceMap: true, | ||
| displayName: true, | ||
| overrideContext: (context) => { |
There was a problem hiding this comment.
If this would be required for every project that uses Material UI and Pigment CSS, we should make it part of the library. Do we know why it is required tough? Maybe we are fixing a symptom, not the problem
| ref={ref} | ||
| {...other} | ||
| style={{ | ||
| ...other.style, |
There was a problem hiding this comment.
This should come last, props' style should override the predefined CSS vars if needed.
| {...other} | ||
| ownerState={ownerState} | ||
| style={{ | ||
| ...other.style, |
There was a problem hiding this comment.
Same here, this should come last.
| {...other} | ||
| style={{ | ||
| ...(variant === 'elevation' && { | ||
| '--Paper-shadow': (theme.vars || theme).shadows[elevation], |
There was a problem hiding this comment.
We should prefix this variable no? --Paper-shadow feels like one that would easily conflict. If we match the values in the theme:
| '--Paper-shadow': (theme.vars || theme).shadows[elevation], | |
| '--MuiPaper-shadow': (theme.vars || theme).shadows[elevation], |
8 participants
Use
styled-v6codemod + edge case manual adjustment for the rest of the components in #41273