Nowadays well-known @material-ui is a legacy package, and all it’s components were migrated to new @mui package. Previous is no longer maintainable, and new components appear only in @mui. So, it’s reasonable question for everyone: How to migrate to the new package?
I have an answer) Of course, my thoughts were, that process shouldn’t be as complex, because this is a routine for thousands of developers. Also, mui-team wrote some instructions for migrations here and here. They works well if to follow, but with case, when you often use such construction as
makeStyles/withStyles around your project and use redefined commercial theme (as minimal.cc in my case), you may encounter some difficulties. That’s my story down below…
## No more
In a few words, developers decided to use
styled lib in basement, and marked previous systems with
makeStyles as legacy. Of course, this method have a lot of advantages, but if you have a lot of usages of legacy code, you need make them to work, at least.
Thanks for developers team, they left a loophole for using legacy. Package @mui/styles should help.
The biggest trap is that definition for
makeStyles is still available in
@mui/material, but it returns some kind of shit with
never type and looks more like a stub.
Here pictures about what I mean:
## Your bro makeStyles
## Not your bro @mui/material/styles.makeStyles, returning never
So, in components you should use
makeStyles only from
@mui/styles after migration, this is the rule!
### Connecting theme overrides for material
Guide about redefining of material components available here and very simple. But, of course, with legacy – it is not as simple as in case using
As answers that I googled said, I should just replace some basic constructions with theme overrides attachments like that:
And, as you remember, in components I should use only
@mui/styles. And thats the problem – looks like those packages not synchronized, and in this case I get styles overrides components on theme level (with
createTheme), but in
makeStyles I get
theme as empty object, and I can’t use any utilities or patterns or whatever:
And I get not cached exceptions and non working project at all. And it makes me sad.
But we have an ability to import
@mui/styles also, and in this case I got correct
theme variable with all what I need in
withStyles of component, but, unfortunately, I lost all my basic themes overrides:
### Default button without any styles, that indicates that i lost all theme overrides 🙁
### But look what I got instead 🙂
So, the only decision that I’ve found is to use both of
ThemeProvider like so:
Everything works fine, in future, you can use both methods of components decorations, but I would prefer to use
styled as common one. And, of course, after all those manipulations you can remove outdated package
@material-ui from your project. You are awesome 🙂