19

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.

picklepick
  • 1,370
  • 1
  • 11
  • 24

1 Answers1

10

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.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • "not to be confused with MUI styled". But, isn't this the same as `styled` at https://mui.com/system/basics/#main-content. So the question is which MUI `styled` are you referring to in "not to be confused with MUI styled" – Sangeet Agarwal Feb 11 '22 at 23:18
  • 2
    @SangeetAgarwal what I meant is that the `styled()` function from emotion and the `styled` from MUI are different. MUI styled is a wrapper of emotion styled. There are 2 MUI styled functions, one from `@mui/system`, the other from `@mui/material`, both do its own thing before calling the emotion one to do the real job. – NearHuscarl Feb 12 '22 at 02:44
  • I have a custom component library that uses emotion and custom theme, but I also fill in gaps with Mui components. Which ThemeProvider should be used in this situation? – Kwhitejr Feb 20 '22 at 23:52