Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Migrate all components to emotion

See original GitHub issue

As decided in https://github.com/mui-org/material-ui/issues/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 });

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:106
  • Comments:74 (65 by maintainers)

github_iconTop GitHub Comments

15reactions
oliviertassinaricommented, Apr 2, 2021

I have removed the “On hold” label as @mnajdova is back. We should have bandwidth now to get to 100% 🔥

14reactions
oliviertassinaricommented, May 21, 2021

Well done everybody in the migration! 👏

Read more comments on GitHub >

github_iconTop Results From Across the Web

Migrating from Styled Components to Emotion: Simon Hartcher
Migrating from Styled Components to Emotion - A short and simple guide. ... First we want to find all the files that import...
Read more >
How we migrated 541 components from Styled ... - Storybook
Last quarter we migrated from Styled Components to Emotion across all our codebases. That meant refactoring 541 components across five ...
Read more >
Migrating to Emotion 10
The upgrades to Emotion 10 are split into two parts. The first part can be done automatically by using eslint-plugin-emotion . Codemoddable. Change...
Read more >
Migrate all components to emotion #24405 - mui/material-ui
As decided in #22342 we need to migrate all the components to the @mateiral-ui/styled-engine (emotion by default) API.
Read more >
Migration to emotion - HackMD
Migration to emotion. Converting styles from JSS to emotion. Things to consider when migrating component's styles to emotion.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[Checkbox] Missing property defaultChecked

Next page

Lots of empty data-meta="MuiBox" style tags generated