Skip to content

Migrate all components to emotion #24405

New issue
New issue
Closed
#26389
Closed
Migrate all components to emotion#24405
#26389
Labels
priority: importantThis change can make a difference
Milestone
 
v5-beta
@mnajdova

Description

@mnajdova
mnajdova
opened on Jan 14, 2021

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:

  • Update sx prop types
  • Update tests (classes & describeConformanceV5 usage)
  • Add componentClasses files
  • Export componentClasses from index.js & index.d.ts

Component checklist:

  • useThemeProps, useUtilityClasses are used and correct (styleProps need to be created)
  • slots styles are converted to separate styled() components (example ButtonLabel)
  • styleProps and classes are spread on root and all slots correctly
  • if there is component prop, it is used like as={component} on the Root slot
  • $slot are converted to [& .${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

@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 });

Metadata

Metadata

Assignees

No one assigned

    Labels

    priority: importantThis change can make a difference

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions