[material-ui] Migrate components to support CSS extraction #42001
Conversation
siriwatknp
added
component: dialog
| @@ -104,6 +111,26 @@ const pigmentOptions = { | |||
| transformLibraries: ['local-ui-lib'], | |||
| sourceMap: true, | |||
| displayName: true, | |||
| overrideContext: (context) => { | |||
There was a problem hiding this comment.
A workaround for mui/pigment-css#10
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
There was a problem hiding this comment.
probably related issue: mui/pigment-css#8
siriwatknp
force-pushed
the
mui/css-extraction-2
branch
from
e4f4831
to
279e4cc
Compare
siriwatknp
added
component: LoadingButton
| @@ -117,6 +117,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) { | |||
| 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: { … } },
]| @@ -104,6 +111,26 @@ const pigmentOptions = { | |||
| 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
| @@ -107,6 +113,22 @@ const Paper = React.forwardRef(function Paper(inProps, ref) { | |||
| className={clsx(classes.root, className)} | |||
| 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.
| @@ -137,6 +175,10 @@ const Typography = React.forwardRef(function Typography(inProps, ref) { | |||
| className={clsx(classes.root, className)} | |||
| {...other} | |||
| ownerState={ownerState} | |||
| style={{ | |||
| ...other.style, | |||
There was a problem hiding this comment.
Same here, this should come last.
Use
styled-v6codemod + edge case manual adjustment for the rest of the components in #41273