As decided in #22342 we need to migrate all the components to the @mateiral-ui/styled-engine (emotion by default) API. We've already converted a dozen components. We are now confident with the approach. We have fixed most of the challenges it creates. This issue will help track the progress of the migration.
For converting a component, you can use as a template any of the already converted components, e.g #24397. We have also this migration guide in case you want to prepare yourself before starting, or in case if something is not working as expected.
This is a useful checklist to have when migrating a component:
General checklist:
Component checklist:
Here is a list of all components with their status:
Note: if you see that the components depends on some other components, then those components need to be converted first, before the component itself can be migrated.
@material-ui/core
@material-ui/lab
Once the migration of the core components is done, we can then migrate all the demos of the documentation to the sx prop (preferred) and styled API, removing all imports of withStyles and makeStyles.
Current progress 169/169
Array.from(document.querySelectorAll('.contains-task-list')[2].children)
.concat(Array.from(document.querySelectorAll('.contains-task-list')[3].children)).reduce((acc, item) => {
if (item.querySelector('input[type="checkbox"]:checked')) {
acc.done += 1;
}
acc.total += 1;
return acc;
}, { total: 0, done: 0 }); 
As decided in #22342 we need to migrate all the components to the
@mateiral-ui/styled-engine(emotion by default) API. We've already converted a dozen components. We are now confident with the approach. We have fixed most of the challenges it creates. This issue will help track the progress of the migration.For converting a component, you can use as a template any of the already converted components, e.g #24397. We have also this migration guide in case you want to prepare yourself before starting, or in case if something is not working as expected.
This is a useful checklist to have when migrating a component:
General checklist:
sxprop typesclasses&describeConformanceV5usage)index.js&index.d.tsComponent checklist:
useThemeProps,useUtilityClassesare used and correct (stylePropsneed to be created)styled()components (exampleButtonLabel)stylePropsandclassesare spread on root and all slots correctlyas={component}on the Root slot& .${componentClasses.slot}]Here is a list of all components with their status:
Note: if you see that the components depends on some other components, then those components need to be converted first, before the component itself can be migrated.
@material-ui/core
ListSubheader,Chip[Autocomplete] Migrate to emotion #24696SwitchBase[Checkbox] Migrate to emotion #24702ClickAwayListenerNO_NEED_FOR_CONVERSIONModal[Drawer] Migrate to emotion #25091FadeNO_NEED_FOR_CONVERSIONInputBase[TextField] Migrate FilledInput to emotion #24634GrowNO_NEED_FOR_CONVERSIONInputBase[TextField] Migrate Input component to emotion #24638FormLabel[TextField] Migrate FormLabel and InputLabel to emotion #24665MenuList[Menu] Migrate to emotion #25264ListItem[Menu] Migrate MenuItem to emotion #24631MenuListNO_NEED_FOR_CONVERSIONInput[Select] Migrate NativeSelect to emotion #24698NoSsrNO_NEED_FOR_CONVERSIONInputBase[TextField] Migrate OutlinedInput to emotion #24688PaginationItem[Pagination] Migrate Pagination and PaginationItem to emotion #25146PopperNO_NEED_FOR_CONVERSIONPortalNO_NEED_FOR_CONVERSIONNO_NEED_FOR_CONVERSIONInput,NativeSelectInput,FilledInput,OutlinedInput[Select] Migrate to emotion #25653SlideNO_NEED_FOR_CONVERSIONSnackbarContent[Snackbar] Migrate to emotion #25142Fab[SpeedDial] Migrate to emotion #25166Tooltip,Fab[SpeedDial] Migrate to emotion #25166StepLabel[Stepper] Migrate StepButton to emotion #25516SwipeableDrawerNO_NEED_FOR_CONVERSIONSwitchBase[Switch] Migrate to emotion #24693Select,Menuitem[Table] Migrate TablePagination to emotion #25809TextareaAutosizeNO_NEED_FOR_CONVERSIONZoomNO_NEED_FOR_CONVERSION@material-ui/lab
Unstable_TrapFocusNO_NEED_FOR_CONVERSIONOnce the migration of the core components is done, we can then migrate all the demos of the documentation to the
sxprop (preferred) andstyledAPI, removing all imports ofwithStylesandmakeStyles.Current progress 169/169