Answer a question

This is a follow-up question, to this question about theming MUI v5. Although my questions were answered, I'm still having difficulties understanding where exactly the @emotion/react API and when the @mui/material/styles should be used. I read to the migration guide, while this does answer some 'how to' questions, I don't understand the bigger picture.

When do I use MUI's styling, when emotion's? Why are there two styling solutions? Should I use MUI's ThemeProvider or Emotion's? What are the differences? These questions might be trivial to an experienced user, but as someone who's just getting started this is all a lot to take in and understand.

Answers

MUI v5 uses emotion as a default style engine. The MUI team recommends styled/sx to customize the component styles. Under the hood, it calls the styled() function from emotion (not to be confused with MUI styled), that's where the emotion part relevant. You don't need to care about the ThemeProvider from emotion if you are using MUI.

About the 2 providers, the only thing they share in common is the name and the ability to inject the theme object to the children. ThemeProvider from emotion can accept any theme object and is not integrated well with the MUI APIs as seen from the other answer here, because it's only meant to use with emotion alone.

The one from MUI has a stricter type and is used by most MUI components in the framework, so if you change one variable in MUI theme, many MUI components will be affected, it also has the default theme if you don't provide any.

So if you only use emotion without MUI and you want to share some styles across the children, use emotion's ThemeProvider. Since you're using MUI just ignore it, it's not relevant here.